浏览器内中文两端对齐的完美实现

来源:转载

之前提到过 chrome已经支持中文的两端对齐了,事实上,目前大多数浏览器,如果是新版本,都没有问题。无奈,手机配置低,终究还是换回了系统自带的。然后,我发现,它不支持中文的两端对齐,强迫症受不了啊。

目前网上没发现有什么完美的方法,不过有一篇 文章比较有参考价值,即在所有字符之间插入空格,然后使用letter-spacing的负值属性,隐藏掉这些空格。这样,中文之间有了空格,相当于一个个单词了,自然就可以两端对齐了。

不过,这个方法并不完美,因为如果内容里面包含html标签,比如链接,插入空格就无效了,所以要排除html标签。而且,如果内容含有html字符实体,也会被打散,失去作用,比如“©”,本来应该显示版权符号“©”,插入空格就直接输出“©”了。

所以,最好只在中文字符间插入空格,这样不会影响html实体。可是,没插入空格的英文单词,字母之间没有空格,在letter-spacing为负值时,字母不就重叠了么?没关系,我们可以改用word-spacing,这样只缩减单词间的距离。同时,由于html中,连续的空格默认显示为一个,为了避免原本就存在的空格缩减后不明显,导致英文单词连在一起,可以加入span标签,单独设置这些空格的letter-spacing为正值。

那么,最终的js实现如下(可以使用低端浏览器看我的博客效果,欢迎反馈修改,共同完善):

//注意,请保证符合html规范,标签闭合,单独的尖括号请用html实体表示。如,p标签内不能含有div标签,否则获取innerHTML时可能出错。

//请保证p标签已经添加属性 “text-align: justify; text-justify: inter-ideograph;”。

//该方法会使复制的内容包含大量空格,不过这不正好可以防止简单抄袭么?

<script>var allp=document.getElementsByTagName('p');//选择所有p标签var i=0;for(i=0;i<allp.length;i++){//对于每一个p标签var allchar=allp[i].innerHTML.split('');//将p标签内容的所有字符打散var j=0;var istag=false;//标识是否属于标签内部'<***>'var isch=true;//标识是否是中文,作用是判断下一个字符前是否需要加空格for(j=0;j<allchar.length-1;j++){if(allchar[j]=='<'){//标识标签的起始位置istag=true;}else if(allchar[j]=='>'){//标识标签的结束istag=false;}else if(istag==false){//对于标签'<>'以外的字符if(/[/u4e00-/u9fa5]/.test(allchar[j])){//如果是中文if(isch==true){//如果前一个字符也是中文(或空格,见下),它前面就已经有空格了,不再添加if(allchar[j+1]!=' '){//如果后一个字符是空格,那么它后面也不用加空格了,因为按照规则,紧邻的空格,后面的全都无效allchar[j]=allchar[j]+' ';}}else{//如果前一个字符不是中文(或不是空格),则它前面应该没有空格,加一个if(allchar[j+1]==' '){//同上,判断后面是不是空格allchar[j]=' '+allchar[j];}else{allchar[j]=' '+allchar[j]+' ';}}isch=true;//更新中文标识}else if(allchar[j]==' '){allchar[j]='<span style="letter-spacing:.5em;"> </span>';//对于本来就存在的空格,为避免word-spacing的负值导致空格不明显,这里单独调大空格的占位宽度isch=true;//既然这里有了空格,那么后面就不需要再有了,所以将isch标志改为true}else{isch=false;//更新中文标识}}}allp[i].innerHTML=allchar.join('');//将打散的字符再次拼接,作为p标签的内容allp[i].style.wordSpacing='-.15em';//设置p标签内的单词间距为负,变相隐藏中文间添加的空格,注意,不是字母间距,因为字母间没有空格}</script>


分享给朋友:
您可能感兴趣的文章:
随机阅读: