单行文本如何两端对齐

两端对齐当然是针对多行文本，何来单行文本两端对齐之说？是有的，请看下面的这个图。

.fulljustify {
  width: 100px;
  text-align: justify;
}
.fulljustify:after {
  content: "";
  display: inline-block;
  width: 100%;
}

这种办法实际上就是利用伪元素在单行文本的底下添加一行与之同宽且显示为空的内容，于是乎单行变成了多行，居中对齐也就生效了。达到了这样的效果，即即便是字数不一样，只要是宽度相同且足够，那么在不同位置的单行文本也可以左右文本对齐。

另外要注意，由于单行文本的底下实际上增加了一行文本，这就导致其高度变高，如果其高度超过了其父元素，当堆积起来时可能就会导致相应的显示问题，这时单行文本的父级元素的高度需要给够。

参考：http://blog.vjeux.com/2011/css/css-one-line-justify.html