css 中text-align:justify 到底有什么作用？

Question

如题所述

Answer 1

这个是属性是单词两端对齐的意思。
值 justify 可以使文本的两端都对齐。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。

你对比一下下面的代码就明白了
css代码：
.box1{ width:500px; line-height:20px; margin:10px auto; background-color:#cdd; text-align:justify}
.box2{ width:500px; line-height:20px; margin:10px auto; background-color:#cdd; text-align:left;}

html代码：
<div class="box1">There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really</div>
<div class="box2">There is clearly a need for CSS to be taken seriously by graphic artists. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any one will load the style sheet into this very page. The code remains the same, the only thing that has changed is the external .css file. Yes, really</div>

Answer 2

这个是属性是单词两端对齐的意思。
值 justify 可以使文本的两端都对齐。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。

你对比一下下面的代码就明白了
css代码：
.box1{ width:500px; line-height:20px; margin:10px auto; background-color:#cdd; text-align:justify}
.box2{ width:500px; line-height:20px; margin:10px auto; background-color:#cdd; text-align:left;}

Answer 3

值 justify 可以使文本的两端都对齐。在两端对齐文本中，文本行的左右两端都放在父元素的内边界上。然后，调整单词和字母间的间隔，使各行的长度恰好相等。
把一段文字摆放在一个框中，一行写满时需要另起一行，如果下一个字或单词放在一行末尾会超出框的范围的话，就要把这个字或单词放到下一行，这一行末尾会留下空白。left不会处理行尾的空白，而justify会把左右两端都对齐，行尾不留空白，把行尾的空白平分到字或单词的间隔中。中文都是方块字，效果不明显。英文单词长短不一，left 和justify的效果差别就很明显了。