一种很简单的设计排版风格，图A表示左对齐，但实际上我们想要的可能是B所示的对齐方式。
这就是传说中的两端对齐。 还有一种更准确的说法是两端对齐。
一开始我尝试用CSS来解决这个小问题。 我查了很多方法，发现没有完美兼容的解决方案。
在一些cssers中css分散对齐，css的两端对齐方案是基于text-align: justify和text-align-last: 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;
}这样基本上就可以达到我们想要的疗效了。
不过我昨天想推荐的方法并不是里面的方法。 上面的方法确实可以用在静态页面中css分散对齐，但是当数据很多的时候无缘无故的减少空格就有点麻烦了。 而且，如果文本是动态的或者是用户提交的文本，我们就很难控制文本中空格的减少。 因此，我的想法是通过脚本改变文本的字母间距，实现文本两端的分散对齐。
重点是算法：
首先我们看下图
四行，汉字数为2、2、4、3
如果要达到B的疗效，只需保持其他粗细与最长的4个汉字一致即可。 这里我们需要减少其他线之间的间隙，我们使用 em 单位来实现这一点。
显然，为了对齐，我们将第1-2行的字母间距缩小为2em； 第 4 行可以减少多少 em 来对齐？
计算方法需要减少间隙宽度=(4-3)/2，即(最大文本数-当前文本数)/(当前文本数-1)
验证一下：
名字需要减少的字母间距值=(4-2)/(2-1)=2 性别也用同样的方式估计
公式为：当前要缩小的文字宽度=（最大宽度-当前宽度）/（当前宽度-1）
这样算法就很容易处理了
HTML中的代码如下
姓名
性别
兴趣爱好
座右铭
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;ismax){
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页面调用方法
//
这个方法很有用
优势：
1.不需要减少多余的空格或空字符或空行
2.对于动态添加的文本也同样生效
3.同样适用于用户输入的文本
4.无论行数多少，都会手动两端对齐
缺点：
1.需要使用js和jq脚本来实现，添加脚本请求。
2、目前只能支持每行英文字符或每行英文，因为估算方式是文字粗细。
3、多行大小写字母同时存在时，尚未实现兼容性。
发表评论