text-justify

版本： CSS3

CSS属性 text-justify 定义的是当文本的 text-align:justify 时的齐行方法。

示例

text-justify: none;
text-justify: auto;
text-justify: inter-word;
text-justify: inter-character;
text-justify: distribute; /* 已被废除，不提倡使用 */

浏览器支持

仅仅IE、火狐浏览器都支持 text-justify

语法:

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

取值

• none 表示关闭掉两端对齐的设置。表现的效果和没有设置 text-align 一样，当你因为某种原因需要在已经设置了 text-align 的元素上禁用齐行效果的时候，这个属性值很有用。
• auto 默认值，浏览器根据显示的效果和质量来确定符合当前状态的最佳对齐方式，当然这种对齐方式将是最适合某种语言文字的排版（例如：英语，中文，日语，韩语等）。如果没有对 text-justify 进行设置的话，则是默认使用两端对齐法则。
• inter-word 通过在文本中的单词之间添加空间来实现两端对齐（这将会改变 word-spacing 的值），比如英语或韩语就是最适合使用这个属性来用空格分隔单词的语言。
• inter-character 通过在字符之间添加空格（有效地改变字母间距）来调整文本，这最适合日语等语言。

  通过在文本中的字符之间添加空间来实现行对齐（这将会改变 letter-spacing 的值），比如日语就是最适合使用这个属性的语言。

• distribute 显示效果与设置了 inter-wrod 一致，不提倡使用这个属性，现在这个属性或许还能有效果，但那完全是为了向后兼容而被保留着。

例子

div{text-align:justify;text-justify:inter-word;}

<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>

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;
}