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-word
或inter-character
。这在多语言场景中非常有用,其中内容语言在渲染之前未知,允许浏览器用户代理根据哪种方法更适合语言环境来相应地选择。none
: 禁用对齐方法,有效地删除任何对齐机会,或覆盖对齐方法可能出现在级联中的位置。

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

前三个设置文本对齐,就像 CSS text-align
属性一样,文本可以对齐到左侧、右侧或完全居中。
第四个图标是对齐选项,它告诉内容填充文档的整个宽度,以便每行都与边缘右对齐,无论它是否影响单词之间的间距。

text-justify
属性允许我们做同样的事情,但具有额外的灵活性来确定用于对齐内容的间距方法是在单词之间还是字符之间管理的。
浏览器支持
text-justify
属性包含在 CSS 文本模块级别 3 规范中,该规范目前处于编辑草案状态(撰写本文时)。
此属性目前被列为在候选推荐期间被删除的“风险”。因此,不建议在生产中使用此属性,因为它不太可能在不久的将来被所有浏览器作为标准采用。
当前支持仅限于 Firefox 55+。Internet Explorer 11 和 Edge 14+ 也支持该属性,但仅支持 inter-word
值以及未包含在 W3C 规范中的非官方值。
此浏览器支持数据来自 Caniuse,其中包含更多详细信息。数字表示浏览器在该版本及更高版本中支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
否 | 55 | 11 | 18 | 否 |
移动/平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
否 | 127 | 否 | 否 |
对于患有阅读障碍的人来说,这将导致无障碍性问题,因为他们会感到困惑,并且可能会失去阅读的位置。这是因为间距不一致。
务必牢记这一点,因为世界上有很多人患有阅读障碍。
你好 Dave,
我患有阅读障碍,我完全同意。我个人认为最好不要更改文本,因为当使用对齐方式时,我会感到非常迷茫。