一个很简单的设计排版样式，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、多行大小写同时存在的情况也还没能实现兼容。
原创文章，转载请注明出处。欢迎转载。
