假如一个页面需要填写姓名和联系方式，为了使样式美观，通常需要文字两端对齐，即“姓”和“联”对齐，“名”和“式”对齐，通常情况下是很难对齐的：
这边有个小技巧，就是利用text-align:justify+伪类，实现方式如下：
```<!DOCTYPE html><html><head><meta charset="utf-8"><title>JS Bin</title><style>span{display:inline-block;/* border:1px solid red; */width:4.5em;text-align:justify;font-size:20px;overflow:hidden;height:20px;line-height:20px;}span:after{content:"";display:inline-block;width:100%;border:1px solid green;} </style></head><body><span>姓名</span><br><span>联系方式</span></body></html>```
为什么要用伪类？
因为text-align:justify;可以实现文本两端对齐，只对换行文本生效，这个伪类相对于让文本换行。
