css+js解决文本两端对齐以及分散对齐

一个很简单的设计排版样式,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、多行大小写同时存在的情况也还没能实现兼容。

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

阅读 4,161 评论 0 阅读全文

记录工作生活点滴。

返回
顶部