css 段落⽂字（中英⽂混杂）实现两端对齐
今天分享⼀个⼩技巧，是中英⽂两端对齐，只是应对哪些变态的需求。⼀般情况下还是不推荐使⽤的，毕竟使⽤了⼏句js。案例如下：
混合使⽤汉字和英⽂的段落默认如下：
两边是不对齐的(⼀般情况下，我们对这种情况不做处理，除⾮需求或者设计⾮要我们实现两端对齐)。
对齐之后如下：
实现思路
⼀般的两端对齐是使⽤text-align:justify，但是text-align:justify⼀般情况下只针对英⽂管⽤。（因为css是⽼外设计的，⽼外在justify判断的时候，是根据单词直接的空格来的，中⽂两个汉字之间没有空格，所以⼤部分情况下text-align:justify不管⽤，所以这个属性⼤部分形同虚设！）。
html span 居中
解决办法
步骤⼀ ：就是在汉字之间添加空格，然后再去除空格来实现。
添加空格我们⽤js来实现，先split然后再join就可以了！
代码如下：
步骤⼆：添加空格之后，字间隙变⼤，会很难看，然后我们在⽤css的letter-spacing属性，进⾏相应的缩进。
代码如下：
这样就达到了两端对齐的效果。总结
"某某某某haorooms 博客".split ("").join (" ");
letter-spacing: -0.15em;
按照上⾯的思路，总结起来，⽤jquery实现代码如下：
$("#haorooms").css({"text-align":"justify","letter-spacing":"-0.15em"});
$</span><span class="pun">(</span><span class="str">"#haorooms"</span><span class="pun">).</span><span class="pln">html</span><span class 注释
当然，也可以⽤纯js来实现这个效果！代码如下：
var ElementById("haorooms");
Align = "justify";
box.style.letterSpacing = '-.15em';
box.innerHTML = box.innerHTML.split("").join(" ");

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。