解决text-align: justify;浏览器、安卓手机不兼容问题

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

posted @ 2018-09-29 14:14  大力它二哥  阅读(329)  评论(0编辑  收藏  举报