好贷网好贷款

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

发布时间:2016-12-5 6:23:35 编辑:www.fx114.net 分享查询网我要评论
本篇文章主要介绍了"css+js解决文本两端对齐以及分散对齐",主要涉及到css+js解决文本两端对齐以及分散对齐方面的内容,对于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、多行大小写同时存在的情况也还没能实现兼容。 原创文章,转载请注明出处。欢迎转载。

上一篇:shell中变量自增的实现方法
下一篇:乐蜂网今日卖身唯品会

相关文章

相关评论