1.兼容PC端浏览器
.h_text{ text-align:justify; text-justify:inter-ideograph;width:200px;}
.span_hid{ display:inline-block; width:100%;}
<h1 class="h_text">这一行要两端对齐<span class="span_hid"></span></h1>
text-align:justify :只有一行文字或者最后一行文字,是没效果的,默认靠左对齐
text-justify:inter-ideograph;增加或减少词间的空格
2.兼容手机浏览器与safair
每个文字之间添加了一个空格,成功解决了各浏览器不兼容、手机端不兼容的问题。
.h_text{ text-align:justify; text-justify:inter-ideograph;width:200px;} .span_hid{ display:inline-block; width:100%;}
<h1 class="h_text">这 一 行 要 两 端 对 齐<span class="span_hid"></span></h1>
3.
当然文字少是没啥问题,但是文字比较多的话,需要一些JS代码给文字之间加空格。
var text= "这一行要两端对齐";
var result = text.split("").join(" ");
原文地址:https://segmentfault.com/a/1190000013146385