CSS 中, 当 text-align 属性被赋值为 justify 时,text-justify 属性经常被用来和 text-align 属性一起设置文本两端对齐的方式。
p {
text-align: justify;
text-justify: inter-word;
}
Values
inter-word: 表示当前文本是通过调整单词 (word) 之间的间隔来实现两端对齐的, 实际上是增加了多余的单词间距. 这个属性值其实是 word-spacing 属性的变形.
inter-character: 表示当前文本是通过调整字符 (character) 之间的间隔来实现两端对齐的, 实际上是增加了多余的字符间距. 这个属性值其实是 letter-spacing 属性的变形.
auto: 允许浏览器从 inter-word 和 inter-character 中挑选合适的值作为两端对齐的对齐方式. 多语言情景下, 文本渲染之前无法得知这是哪一国的语言. 这个时候,(auto)就会允许浏览器用户代理来根据当前文本的语言来选择适合的两端对齐方式.
none: 禁用两端对齐规则, 也就是移除任何可能通过 (样式) 层叠生效的两端对齐方式的设置或者重写.
到底什么是两端对齐?
两端对齐文本是一个很富有想象力的说法, 它用来描述文本是如何填充满包含它的父容器的方式. 实际上, 你可以已经很熟悉两端对齐的文本了, 但是你却不认识它. 如果你曾经使用过文本编辑软件, 比如 Word 和 Google Docs 的话, 你就可能非常熟悉下面的这些图标了(icons):
前面三个是用来设置文本对齐的, 就好像 CSS 的 text-align 属性, 可以设置文本左对齐、右对齐、和居中对齐.
第四个 icon 就是两端对齐选项. 它让文本内容填充满文档的整个宽度, 不管有没有影响到单词间距, 每一行文字都会紧靠边界右对齐.
Google Docs 中的两端对齐文本每一行都会扩大单词间距来占据整篇文档的宽度.
text-justify 属性允许我们实现同样的效果, 但是它可以灵活变通来决定是通过单词 (words) 间距还是字符 (characters) 间距来调整文本两端对齐方式.
浏览器兼容性
text-justify 属性已经被收入了 CSS Text Module Level 3 文档。
由于可能会在候选推荐期间就被废弃掉, 当前 text-justify 属性已经被列为 ”at risk”(危险)级别. 在不远的将来, 它不太可能被纳入各浏览器通用标准, 因此并不建议在项目生产中使用这个属性.
当前完全支持它的只有 Firefox 55+. Internet Explorer 11 和 Edge 14+ 也支持此属性, 但是只有 inter-word 值有效, 而且因为是非正式的属性值,W3C 规范也未收录它.
浏览器支持数据来自 Caniuse, 点击浏览更多. 有数据表明浏览器版本支持该特性.