Web前端开发资源网日常使用中我们可以用 text-align: justify; 实现文本两端对齐效果。
但是该属性有一个问题，不支持单行文本的两端对齐，只有达到2行或者以上才会有效。
所以需要采用下面两种方法实现单行文本两端对齐效果：
利用伪类 :after 实现：给元素添加伪类 :after 设置成行内块元素，宽度设置为100%。
div:after{
content: "";
display: inline-block;
width: 100%;
}在元素标签内加一个空标签： <span></span> 或者 <i></i> 等都可以。设置为行内块， padding-left 或者宽度 width 设置为 100%。我这里用的是 <i> ，比如 <img> ，直接只给个宽度100%就可以。
p i{
display: inline-block;
/*padding-left: 100%;*/
width: 100%;
}还有一个问题是IE不支持，需要再加一个属性：text-justify:inter-ideograph; （用表意文本来排齐内容）
注：text-justify 只支持IE浏览器，有以下几个属性：
auto 浏览器决定齐行算法。
none 禁用齐行。
inter-word 增加/减少单词间的间隔。
inter-ideograph 用表意文本来排齐内容。
inter-cluster 只对不包含内部单词间隔的内容（比如亚洲语系）进行排齐。
distribute 类似报纸版面，除了在东亚语系中最后一行是不齐行的。
kashida 通过拉伸字符来排齐内容。
代码如下：
HTML：
<p> 我是谁？ <i></i> </p> <div> 我不知道 </div>
CSS：
div,p{
text-align: justify;/*两端对齐*/
border: 1px solid red;
text-justify:inter-ideograph;/*IE支持*/
}
div:after{
content: "";
display: inline-block;
width: 100%;
}
p i{
display: inline-block;
/*padding-left: 100%;*/
width: 100%;
}不过，谷歌内核和IE内核还是有所区别的。如下图：
细心的人会发现，下面会多出一行空白，如果我们确定就是单行文本，可以通过固定元素的高度来实现去掉空白。
div,p{
height: 36px;
line-height: 36px;
}这样就可以了：
未经允许不得转载：Web前端开发资源网 » 利用css实现单行文本文字两端对齐
推荐阅读：
jQuery.dotdotdot多行文本省略号插件的使用方法