text-justify

text-justify CSS 属性设置当text-align: justify; 设置为元素时，应应用于文本的哪种对齐类型。

语法

css

text-justify: none;
text-justify: auto;
text-justify: inter-word;
text-justify: inter-character;
text-justify: distribute; /* Deprecated value */

/* Global values */
text-justify: inherit;
text-justify: initial;
text-justify: revert;
text-justify: revert-layer;
text-justify: unset;

值

none: 文本对齐关闭。这与根本不设置text-align的效果相同，尽管如果您需要出于某种原因打开和关闭对齐，它很有用。
auto: 浏览器根据性能和质量之间的平衡以及最适合文本语言的内容（例如英语、CJK 语言等）选择当前情况下的最佳对齐类型。如果根本没有设置 text-justify，这是使用的默认对齐方式。
inter-word: 通过在单词之间添加空格来对齐文本（有效地改变word-spacing），这最适合使用空格分隔单词的语言，如英语或韩语。
inter-character: 通过在字符之间添加空格来对齐文本（有效地改变letter-spacing），这最适合日语等语言。
distribute: 表现出与 inter-character 相同的行为；此值保留用于向后兼容。

正式定义

初始值	`auto`
应用于	内联级和表格单元格元素
继承	是
计算值	如指定
动画类型	离散

正式语法

text-justify = 
  auto             |
  none             |
  inter-word       |
  inter-character

示例

text-justify 不同值的演示

<p class="none">
  <code>text-justify: none</code> —<br />Lorem ipsum dolor sit amet, consectetur
  adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id
  mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat
  justo id, feugiat leo. Cras eu elementum dui.
</p>
<p class="auto">
  <code>text-justify: auto</code> —<br />Lorem ipsum dolor sit amet, consectetur
  adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit, dictum id
  mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar, consequat
  justo id, feugiat leo. Cras eu elementum dui.
</p>
<p class="dist">
  <code>text-justify: distribute</code> —<br />Lorem ipsum dolor sit amet,
  consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit,
  dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar,
  consequat justo id, feugiat leo. Cras eu elementum dui.
</p>
<p class="word">
  <code>text-justify: inter-word</code> —<br />Lorem ipsum dolor sit amet,
  consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit,
  dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar,
  consequat justo id, feugiat leo. Cras eu elementum dui.
</p>
<p class="char">
  <code>text-justify: inter-character</code> —<br />Lorem ipsum dolor sit amet,
  consectetur adipiscing elit. Nunc ornare maximus vehicula. Duis nisi velit,
  dictum id mauris vitae, lobortis pretium quam. Quisque sed nisi pulvinar,
  consequat justo id, feugiat leo. Cras eu elementum dui.
</p>

css

p {
  font-size: 1.5em;
  border: 1px solid black;
  padding: 10px;
  width: 95%;
  margin: 10px auto;
  text-align: justify;
}

.none {
  text-justify: none;
}

.auto {
  text-justify: auto;
}

.dist {
  text-justify: distribute;
}

.word {
  text-justify: inter-word;
}

.char {
  text-justify: inter-character;
}

规范

规范
CSS 文本模块级别 3 # text-justify-property

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

text-align