CSS两端对齐之’text-justify’应用技巧

CSS中,当text-align属性被赋值为justify时,text-justify属性经常被用来和text-align属性一起设置文本两端对齐的方式。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11602.html

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: 禁用两端对齐规则,也就是移除任何可能通过(样式)层叠生效的两端对齐方式的设置或者重写.

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11602.html

到底什么是两端对齐?

两端对齐文本是一个很富有想象力的说法,它用来描述文本是如何填充满包含它的父容器的方式.实际上,你可以已经很熟悉两端对齐的文本了,但是你却不认识它.如果你曾经使用过文本编辑软件,比如Word和Google Docs的话,你就可能非常熟悉下面的这些图标了(icons):文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11602.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11602.html

前面三个是用来设置文本对齐的,就好像CSS的text-align属性, 可以设置文本左对齐、右对齐、和居中对齐.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11602.html

第四个icon就是两端对齐选项.它让文本内容填充满文档的整个宽度,不管有没有影响到单词间距,每一行文字都会紧靠边界右对齐.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11602.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11602.html

Google Docs中的两端对齐文本每一行都会扩大单词间距来占据整篇文档的宽度.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11602.html

text-justify 属性允许我们实现同样的效果,但是它可以灵活变通来决定是通过单词(words)间距还是字符(characters)间距来调整文本两端对齐方式.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11602.html

浏览器兼容性

text-justify 属性已经被收入了CSS Text Module Level 3 文档。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11602.html

由于可能会在候选推荐期间就被废弃掉,当前text-justify属性已经被列为"at risk"(危险)级别.在不远的将来,它不太可能被纳入各浏览器通用标准,因此并不建议在项目生产中使用这个属性.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11602.html

当前完全支持它的只有Firefox 55+. Internet Explorer 11 和 Edge 14+也支持此属性,但是只有inter-word值有效,而且因为是非正式的属性值,W3C规范也未收录它.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/11602.html