text-align: justify

 

大家都知道 text-align 属性是规定元素中的文本的水平对齐方式，最常用的值是left、right、center，那么justify是什么呢？

 

在W3C上是这样介绍的：

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

 

这段话有点拗口，为了直观点体现出它的特点，所以直接上码上图：

<p style="width:400px;text-align:left;;margin:20px auto;">
    <strong style="color:#000;margin-bottom:10px;">text-align: left:</strong></br></br>
    Nettie Maria Stevens was an early American geneticist. In 1905, she and Edmund Beecher Wilson were the first researchers to independently describe the chromosomal basis of sexNettie
    在海岸边，退潮时你可徒步走到一些岛屿近处，在潮间带里看见诸如海星、海胆、海带等海洋生物，体验甜蜜的幸福感。或是在天气好时，肩并肩坐在海滩上等待日落晚霞，浪漫满溢。
    </br></br>
    浪漫满溢
</p>

<p style="width: 400px;text-align: justify;margin:20px auto;">
    <strong style="color:#000;margin-bottom:10px;">text-align: justify:</strong></br></br>
    Nettie Maria Stevens was an early American geneticist. In 1905, she and Edmund Beecher Wilson were the first researchers to independently describe the chromosomal basis of sexNettie
    在海岸边，退潮时你可徒步走到一些岛屿近处，在潮间带里看见诸如海星、海胆、海带等海洋生物，体验甜蜜的幸福感。或是在天气好时，肩并肩坐在海滩上等待日落晚霞，浪漫满溢。
    </br></br>
    浪漫满溢
</p>

View Code