CSS 对齐的 ‘text-justify’ 应用技巧

当 CSS 中 text-align 设置为对齐时，text-justify 通常与 text-align 结合使用来指定文本对齐方式。是有道理的。 。

p {
  text-align: justify;
  text-justify: inter-word;
}复制代码

Values

• whitespace：表示当前文本通过调整单词间距在两端对齐，这实际上增加了额外的单词空间。该属性值实际上是属性变形的组合。
• space：
  表示当前文本将通过调整字符间距来两端对齐，实际上是增加了额外的间距。该属性值实际上是字符间距属性的变体。
• auto：允许浏览器为两端的对齐方式在单词和字符之间选择合适的值。在多语言场景中，渲染之前不可能知道文本在哪里。官方语言。目前，它允许（自动）浏览器用户代理根据当前文本的语言选择适当的对齐方法。
• 无：禁用对齐规则，即消除通过（样式）级联指定或覆盖有效合理方法的任何可能性。

到底什么是合理的？

有效文本是一种非常奇特的表达方式用于描述文本。填充包含的父容器。事实上，您可能熟悉一段推理文本，但却没有认出它。如果您曾经使用过Word、Google Docs等文本编辑软件，您可能对以下图标非常熟悉：

前三个用于设置文本对齐方式，就像CSS的text-align属性一样。您可以设置文本的左对齐、右对齐和居中对齐。

第四个图标是对齐选项。这允许文本内容填充文档的整个宽度。无论这是否影响字间距，每行文本都会在边缘附近右对齐。

Google 文档中的对齐方式 每行文本都会扩展间距以占据文档的整个宽度。

text-justify 属性可以让我们达到同样的效果，但是可以灵活决定是使用字间距还是字母间距。调整文本对齐方式。

浏览器兼容性

文本对齐属性已添加到CSS文本模块的3级文档中。

由于候选推荐期间可能被弃用，text-justify 属性目前被归类为“有风险”。在不久的将来，它不太可能被纳入所有浏览器的通用标准中。 ，所以项目制作时不建议使用该属性。

目前仅 Firefox 55+ 完全支持。 Internet Explorer 11 和 Edge 14+ 支持此属性，但只有字面值有效，因为它是非官方的。该属性值未包含在 W3C 规范中。

链接：https://juejin.im/post/5cb9382e6fb9a06888415cfa
来源：掘金
版权归作者所有。商业转载请联系作者获取授权。非商业转载请注明出处。