需求
混合使用汉字和英文的段落默认如下:
var str="你好,我的名字是mirror,nice to meet you!你今天很漂亮,很美丽哦~ 你最近在干什么呀?忙不忙?"
纯中文的情况:
var str="你好,我的名字是米拉,很高兴见到你!你今天很漂亮,很美丽哦~ 你最近在干什么呀?忙不忙?"
可以看出在中英混合的情况下,右侧出现文字没有对齐的情况。
实现思路
一般的两端对齐是使用text-align:justify,但是text-align:justify一般情况下只针对英文管用。(因为css是老外设计的,老外在justify判断的时候,是根据单词直接的空格来的,中文两个汉字之间没有空格,所以大部分情况下text-align:justify不管用,所以这个属性大部分形同虚设!)。
解决办法
jQuery
$(DOM).css({"text-align":"justify","letter-spacing":"-0.15em"});
$(DOM).html()=$("DOM").html().replace(""," ")
-0.15em这个值可以指定,根据你当前的实际情况来设置。
JavaScript
var box=document.getElementById("haorooms");
box.style.textAlign = "justify";
box.style.letterSpacing = '-.15em';
box.innerHTML = box.innerHTML.split("").join(" ");