如何调整 Div 中最后一行文本的对齐方式？-css教程-PHP中文网

如何调整 Div 中最后一行文本的对齐方式？

Susan Sarandon

发布： 2024-12-16 16:44:13

原创

136 人浏览过

How Can I Justify the Last Line of Text in a Div?

将 Div 的最后一行与对齐文本对齐

在某些情况下，需要将 div 的最后一行与对齐文本对齐合理的文本。虽然这通常不是 div 的标准行为，但跨浏览器方法可以实现这种预期效果。

实现需要结合使用 text-align-last: justify;以及 :after 伪内容方法的变体。 CSS 组合成功解决了浏览器兼容性问题，包括 IE6。

应用此方法：

CSS:

p, h1 {
  text-align: justify;
  text-align-last: justify;
}

p:after, h1:after {
  content: "";
  display: inline-block;
  width: 100%;
}

登录后复制

注意： 如果您的 div 仅包含一行文本，则需要额外的 CSS 来防止出现额外的空行出现：

h1 {
  text-align: justify;
  text-align-last: justify;
  height: 1em;
  line-height: 1;
}

h1:after {
  content: "";
  display: inline-block;
  width: 100%;
}

登录后复制

此技术成功确保 div 的最后一行与合理的文本对齐，为各种网页设计需求提供了更大的文本格式灵活性。

以上是如何调整 Div 中最后一行文本的对齐方式？的详细内容。更多信息请关注PHP中文网其他相关文章！