css+js解决文本两端对齐以及分散对齐_js 两端对齐函数-CSDN博客

一个很简单的设计排版样式，A图表示居左对其，但实际上我们想要的可能是B所示的对齐方式。

这就是传说中的两端对齐还有一种更确切的说法是两端分散对齐。

最开始的时候，我试图使用CSS来解决这个小问题，查阅了很多办法，发现没有一种完美兼容的解决方式。

在一些csser使用了css的两端对齐方案是基于 text-align:justify 及 text-align-last:justify 实现来解决这个问题，但是需要在每个字的后面加上空格。

这个办法是这样的：

原理：是通过调整字之间的空格大小来达成的，所以需要事先在每个单词和汉字间都插入一个空格。

ie下 text-align:justify; 是可以产生作用的。所以在ie下很容易实现:

p { 
text-align:justify;
text-align-last:justify;
}

text-align-last 在Firefox12-17下仍处理实验支持阶段，需加前缀 -moz-，FF下这样实现

p{
text-align:justify;
-moz-text-align-last:justify;
}

Chrome, Safari, Opera实现比较麻烦：Chrome23, Safari5.1.7, Opera12.11 不支持 text-align-last, 但支持 text-align 的 jsutify, text-align:justify 不处理块内的最后一行文本（包括块内仅有一行文本的情况，这时既是第一行也是最后一行）及被强制打断的行的两端对齐，但会处理除此之外的其它行，所以只需要将这里的单行变成多行即可，那么我们可以使用伪对象的方式派生出新行，这样不需要额外处理html代码，然后再将派生出的新行隐藏！！

p{
overflow:hidden;
height:20px;
text-align:justify;
}

p:after{
display:inline-block;
content:'';
overflow:hidden;
width:100%;
height:0;
}

这样的，基本上可以实现我们想要的效果了。
但是，我今天想要推荐的方法并不是上面的办法，上面的办法在静态页面中确实可以使用，但是无端端的增加空格对于数据比较多的情况下就有点麻烦，而且，如果文本如果是动态的或者文本是用户提交的情况，我们就很难控制在文本增加空格了。所以，我的思路是通过脚本改变文本的letter-spacing来实现文本两端分散对齐。
重点是算法：
首先我们看下面图

四行，汉字的个数分别是 2、2、4、3
我们想要达到B的效果只需要其他几个长度都与最长的4个汉字保持一致，这里我们要通过增加其他行的间隙，我们使用em单位来实现。
很显然，我们给第1-2行分别增加2em的letter-spacing来对齐；给第四行增加多少em才能对齐呢？
计算办法需要增加的空隙长度=(4-3)/2 也就是 (最大文本个数-当前文本个数)/(当前文本个数-1)
验证一下：
姓名需要增加的letter-spacing值=(4-2)/(2-1)=2 同理性别也是这样计算
公式就是：当前文本需要增加的长度=(最大长度-当前长度)/(当前长度-1)
这样算法出来就好办了
HTML中代码如下

<p class="t1">姓名</p>
<p class="t1">性别</p>
<p class="t1">兴趣爱好</p>
<p class="t1">座右铭</p>

JQ做了一个脚本，针对指定样式的行实现两端对齐。

function justify_Let(obj){
 	var obj=$(obj);
    var lengths=[];
    obj.each(function(){
    	lengths.push($(this).text().length);

    });
    //var smax=Math.max(lengths);
    if(lengths.length==0){return;}
    for(var i=0,smax=lengths[0],len=lengths.length;i<len;i++){
    	if(lengths[i]>smax){
    		smax=lengths[i];
    	}
    }

    for(var i=0,len=lengths.length;i<len;i++){
    	var currlen=lengths[i];
    	if(currlen==smax){continue;}
    	obj.eq(i).css({"letter-spacing": ((smax-currlen)/(currlen-1))+"em"});
    }

html页面调用办法

<script type="text/javascript">// <![CDATA[
justify_Let(".t1")
// ]]></script>

这种办法处理起来有好处的
优点：
1、无需增加多余的空格或者空字符或者空行
2、对动态添加的文本同样生效
3、对用户输入的文本也同样适用
4、无论多少行数都会自动两端对齐

缺点：
1、需要使用js和jq脚本实现，增加了一个脚本的请求。
2、目前只能支持每行都是中文字符或者每行都是英文，因为计算办法是文本长度。
3、多行大小写同时存在的情况也还没能实现兼容。

原创文章，转载请注明出处。欢迎转载。