text-align 属性大家并不陌生，该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。通常我们用到的属性值有left(左边)、right(右边)、center(中间)、inherit(继承)，其中还有一个justify(两端对齐)属性，调整行内容中字母和字之间的间隔。

效果图一

大家可以看得出来，有写的明显效果要好很多，而没有写的，两端没有对齐。

代码如下

1. .content .detail p {
2.     font-size: .8rem;
3.     line-height: 2;
4.     margin: 1rem 0 .5rem;
5.     text-algin: justify;
6.     word-break: break-all;
7. }

效果图二

写手机端H5的朋友们，这个写法很实用。

代码如下

1. <ul class="list">
2.     <li><label>姓名</label></li>
3.     <li><label>出生年月</label></li>
4.     <li><label>性别</label></li>
5.     <li><label>联系电话</label></li>
6. </ul>
8. // less css
9. .litems li {
10.     height: 2rem;
11.     line-height: 2rem;
12.     border-bottom: 1px solid #eee;
13.     label {
14.         height: 100%;
15.         width: 4.5rem;
16.         text-align: justify;
17.         vertical-align: top;
18.         display: inline-block;
19.         &::after {
20.             content: '';
21.             height: 0;
22.             width: 100%;
23.             display: inline-block;
24.         }
25.     }
26. }