1. 首页
  2. css

CSS文本对齐

CSS中的text-justify属性是text-align属性的一个附属属性,该属性用于在text-align设置为justify值时设置文本的对齐方法。

**4***

Values

  • inter-word:指定通过调整单词之间的间距对文本进行对齐,有效地创建额外的单词间距。这实际上是word-spacing属性的变体。
  • inter-character:指定通过调整字符间距来调整文本,从而有效地创建额外的字符间距。这实际上是letter-spacing属性的一个变体。
  • auto:允许浏览器确定是否将对齐处理为inter-wordinter-character更好。这在内容语言在呈现前未知的多语言场景中非常有用,允许浏览器用户代理根据更适合语言上下文的方法进行相应选择。
  • none:禁用对齐方法,有效地消除任何对齐机会,或者重写级联中可能出现对齐方法的位置。

到底什么是对齐?

对齐文本是一种奇特的方式,表示文本如何填充包含它的框。事实上,你可能已经很熟悉文本的合理性,甚至不知道它。如果您曾经使用过Word和谷歌Docs这样的文本编辑软件,那么您可能熟悉这些图标:

谷歌Docs工具栏中的文本对齐和对齐选项左对齐、右对齐或完全居中。

第四个图标是\"对齐\"选项,它告诉内容填充文档的整个宽度,使每一行与边缘齐平,不管它是否影响单词之间的间距。

证明Google Docs中的内容会增加单词之间的间距,以占据每一行的整个文档宽度

text-justify属性允许我们做同样的事情,但有额外的灵活性来确定间距是否正确用于调整内容的方法在单词或字符之间进行管理。

浏览器支持,

CSS文本模块级别3规范中包含text-justify属性,在撰写本文时,该属性目前处于编辑草稿状态。

该属性目前被列为\"有可能\"在候选人推荐期内被放弃。因此,不建议在产品中使用此属性,因为它不太可能在不久的将来被所有浏览器采用为标准。

当前的支持仅限于Firefox 55+。Internet Explorer 11和Edge 14+也支持该属性,但只有inter-word值以及W3C规范中未包含的非官方值。

此浏览器支持数据来自Caniuse,其中有更多详细信息。一个数字表示浏览器支持该版本及更高版本的功能。

桌面

<IE

<Safari

<No

<18

<No

Chrome Firefox Edge
<55 <11

移动/平板电脑

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

发表评论

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