CSS技巧之'text-justify'

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, 点击浏览更多. 有数据表明浏览器版本支持该特性.
图片描述