text-justify

Avatar of Geoff Graham
Geoff Graham

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 $200 免费赠送额度!

CSS 中的 text-justify 属性是 text-align 属性的配套属性,用于在将 text-align 设置为 justify 值时设置文本的对齐方法。

p {
  text-align: justify;
  text-justify: inter-word;
}

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

对齐到底是什么?

对齐文本是说文本如何填充包含它的框的一种花哨的说法。实际上,您可能已经熟悉对齐文本,甚至没有意识到。如果您曾经使用过像 Word 和 Google Docs 这样的文本编辑软件,那么您可能熟悉这些图标

Google Docs 工具栏中的文本对齐和对齐选项

前三个设置文本对齐,就像 CSS text-align 属性一样,文本可以对齐到左侧、右侧或完全居中。

第四个图标是对齐选项,它告诉内容填充文档的整个宽度,以便每行都与边缘右对齐,无论它是否影响单词之间的间距。

在 Google Docs 中对齐内容会在单词之间添加间距,以占据每行文档的完整宽度

text-justify 属性允许我们做同样的事情,但具有额外的灵活性来确定用于对齐内容的间距方法是在单词之间还是字符之间管理的。

浏览器支持

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

此属性目前被列为在候选推荐期间被删除的“风险”。因此,不建议在生产中使用此属性,因为它不太可能在不久的将来被所有浏览器作为标准采用。

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

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

桌面

ChromeFirefoxIEEdgeSafari
551118

移动/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
127