主要思路，文字两端对齐使用text-align:justify，容器添加after伪元素，充当末行就行了。
text-align: justify可以实现文字的两端对齐布局，注意点如下：
1. 两端对齐后，若文字间距太大，可以使用letter-spacing收缩字符间距
2. text-align:justify默认不处理最后一行(只有一行的自然也不会处理)的布局，若要处理，可以用伪元素新增一个末行
示例代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .container { background-color: gray; width: 200px; text-align: justify; text-justify: inter-ideograph; /* for IE */ /*text-align-last: justify;*/ /* safari无效 */ /*text-align: jusfity-all;*/ /* 兼容性未知 */ } .container:after { content: ''; width: 100%; display: inline-block; } .container2{ display: flex; justify-content: space-between; /*子元素必须是block元素，对文字无效*/ } </style> </head> <body> <div class="container">你好你好</div> <div class="container2">你好你好</div> <script> //某些手机浏览器无效，需要文字中添加空格 var text= "你好你好"; var result = text.split("").join(" "); </script> </body> </html>
3. 参与布局的标签必须是inline或inline-block类型，且标签之间换行或者有空格才能实现效果
参考：http://www.cnblogs.com/Travel/p/4552701.html