css段落文字（中英文混杂）实现两端对齐

案例如下：

混合使用汉字和英文的段落默认如下：

两边是不对齐的(一般情况下，我们对这种情况不做处理，除非需求或者设计非要我们实现两端对齐)。

对齐之后如下：

实现思路

一般的两端对齐是使用text-align:justify，但是text-align:justify一般情况下只针对英文管用。（因为css是老外设计的，老外在justify判断的时候，是根据单词直接的空格来的，中文两个汉字之间没有空格，所以大部分情况下text-align:justify不管用，所以这个属性大部分形同虚设！）。

解决办法

步骤一：就是在汉字之间添加空格，然后再去除空格来实现。

添加空格我们用js来实现，先split然后再join就可以了！

代码如下：

"某某某某haorooms博客".split("").join(" ");

步骤二：添加空格之后，字间隙变大，会很难看，然后我们在用css的letter-spacing属性，进行相应的缩进。

代码如下：

letter-spacing: -0.15em;

这样就达到了两端对齐的效果。

总结

按照上面的思路，总结起来，用jquery实现代码如下：

$("#haorooms").css({"text-align":"justify","letter-spacing":"-0.15em"}); $("#haorooms").html()=$("#haorooms").html().split("").join(" ");

注释

-0.15em这个值可以指定，根据你当前的便宜来设置，-0.15em值是经验所得！em是一个单位

当然，也可以用纯js来实现这个效果！代码如下：

var box=document.getElementById("haorooms"); box.style.textAlign = "justify"; box.style.letterSpacing = '-.15em'; box.innerHTML = box.innerHTML.split("").join(" ");

转载请注明：前端录»css段落文字（中英文混杂）实现两端对齐

css段落文字（中英文混杂）实现两端对齐相关推荐

html css中文字段落,css段落文字（中英文混杂）实现两端对齐
今天分享一个小技巧,是中英文两端对齐,只是应对哪些变态的需求.一般情况下还是不推荐使用的,毕竟使用了几句js. 案例如下: 混合使用汉字和英文的段落默认如下: 两边是不对齐的(一般情况下,我们对这种情 ...
css中英文混合实现两端对齐
(处理前) (处理后) 一般的两端对齐是使用text-align:justify,但是text-align:justify一般情况下只针对英文管用.(因为css是老外设计的,老外在justify判断的 ...
CSS解决文字与图片不能水平居中对齐的问题
在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 其实解决办法很简单,只需为图片设置vertical-ali ...
html中单行文本,利用css实现单行文本文字两端对齐
日常使用中我们可以用 text-align: justify; 实现文本两端对齐效果. 但是该属性有一个问题,不支持单行文本的两端对齐,只有达到2行或者以上才会有效. 所以需要采用下面两种方法实现单行 ...
html中文本两端对齐的属性,text-algin:justify实现文本两端对齐方法小结
text-align:justify与text-align-last:justify 1.text-align MDN中这样介绍到:"text-align CSS属性定义行内内容(例如文字) ...
两端分散对齐怎么设置_excel两端对齐_分散对齐怎么设置
excel两端对齐_分散对齐怎么设置--在Excel中对包含文本的单元格设置文本对齐方式时,无论是"水平对齐"还是"垂直对齐"都有多种对齐方式可供选择. 其中& ...
div+css如何让一行内的文字两端对齐？
css如何让一行内的文字两端对齐? text-align:justify;. text-justify语法:text-justify : auto |inter-word | newspaper | ...
css中文字段落对齐,CSS段落对齐方式
CSS段落对齐有两种方式:水平对齐和垂直对齐. 1.水平对齐: (1).text-align:left; //左对齐 (2).text-align:right; //右对齐 ...
如何用css实现一段文字的两端对齐和分散对齐
用css实现一段文字的两端对齐和分散对齐代码分享: <style> div { text-align-last:justify; text-align:justify; text-just ...