css之文本两端对齐的两种解决方法

css之文本两端对齐的两种解决方法

　　提及文本对齐，你们都知道text-align，最经常使用的有left、right、center，今天咱们说一下justify，也就是文本两端 对齐。提及来简单，可是有些小坑你们仍是要注意的。

　　如今咱们有上图两行文本，实际开发中咱们常常会遇到这样的情景：须要把姓名和电话号码这两段文字对齐。咱们天然会想到 text-align: justify; 我也是这么想的，咱们来试一下：

　　刷新一下浏览器，为何没有效果呢？

　　缘由是 justify 对最后一行无效，而咱们的 name 只有一行，固然也就无效了。那咱们怎么解决这个问题呢？

　　咱们能够想到，既然justify对最后一行无效，那咱们增长一行就行了，只要让它不是最后一行不就ok了？固然咱们增长的一行可不能被人看到。这里，咱们想到了伪元素。

　　增长没有文字的一行，咱们来看看页面：

　　很不错，明显已经达到了要求。可是，这样写会不会太麻烦了呢，程序员都是讲究高效率（懒）的人，若是能用一句代码就完成的话，岂不乐哉？

　　别说，真有。这里安利一个新属性 text-align-last ，废话很少说，直接上代码：

　　一句代码达到需求。

　　真好，真好。