1. 首页
  2. css

CSS文本最后对齐

text-align-last允许您控制强制换行之前的最后一行(或唯一一行)文本的对齐方式—例如段落结尾或<br>标记之前的行。

.intro-graph {text-align-last: center;}

在撰写本文时,只有Mozilla浏览器和Internet Explorer支持text-align-last(带有供应商前缀),并且每个浏览器的实现略有不同。该属性应该在chrome35中开始工作,但从chrome40开始,它仍然需要实验性的web平台标志。有关感兴趣点中浏览器实现的更多详细信息。

  • left将最后一行文本对齐到容器的左侧。
  • right将最后一行文本对齐到容器的右侧。
  • center将最后一行文本居中到容器中。
  • justify调整文本的最后一行,使其跨越容器的整个宽度,如果需要,在单词之间插入空格以增加行长。
  • start根据文本的direction将文本与行的\”开始\”对齐-左为LTR语言,右为RTL语言。
  • end根据文本的direction将最后一行与行的\”结尾\”对齐-右对齐表示LTR语言,左对齐表示RTL语言。
  • auto默认值。对齐文本的最后一行以匹配元素的text-align属性(如果已设置)。如果未设置,则auto将文本与开头对齐。
  • inherit应用父元素的text-align-last属性。

演示

此演示显示不同的text-align-last值。注意:Internet Explorer不支持startend值。

兴趣点在Internet Explorer中,text-align-last仅在所选元素中其余文本的text-align设置为justify时工作。此外,IE不识别startend值。

在Mozilla浏览器中,text-align-last将在强制换行之前的最后一行工作,即使元素中的其余文本没有指定对齐方式。

另外值得一提的是,text-align-last为所选元素中的所有最后一行设置对齐方式,而不仅仅是文本的最后一行。例如,如果你的div中有五个段落,你的text-align-last声明将适用于每个段落的最后一行。

如果您只想在集装箱的最后一行使用text-align-last,您可以使用:last-child:last-of-type。您的CSS看起来应该是这样的:

#center-only-last p:last-child {-ms-text-align-last: center;-moz-text-align-last: center;text-align-last: center;}*/pre>

在下面的演示中,左边显示了text-align-last: center;应用于一个div,里面有多个段落。请注意,每个段落的最后一行都居中。右侧显示text-align-last: center;仅适用于使用:last-child的div中的最后一段。<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<第76173页,关于Chrome对浏览器的支持(前缀) Nope Nope

CSS文本最后对齐 为WP2原创文章,链接:https://www.wp2.cn/css/css%e6%96%87%e6%9c%ac%e6%9c%80%e5%90%8e%e5%af%b9%e9%bd%90/

发表评论

您的电子邮箱地址不会被公开。