关于笔墨内容溢出用点点点(...)省略号表示1.常规css方法——可以实现IE，Safari，chrome，opera欣赏器下笔墨溢出省略号表示这是一段测试笔墨，重假如用来测试笔墨溢出后是不是会用省略号表现。 .zxx_text_overflow_1{width:27em; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;} 2.使用ellipsis.xml文件使Firefox支持笔墨溢出后点点点省略号表示这段代码调用了跨文件夹路径的ellipsis.xml文件，看Firefox欣赏器下是够笔墨溢出省略号表示。 ps: 在Firefox下上面div内容表现空黑，此div内容是：“这段代码添加了跨文件夹路径的ellipsis.xml文件，看Firefox欣赏器下是够笔墨溢出省略号表示”。 .zxx_text_overflow_2{width:27em; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; -moz-binding:url('../xml/ellipsis.xml#ellipsis'); overflow:hidden;} 这段代码调用了同文件夹路径的ellipsis.xml文件，看Firefox欣赏器下是够笔墨溢出省略号表示。 ps: 在Firefox下上面div笔墨溢出省略号表现，此div内容是“这段代码调用了同文件夹路径的ellipsis.xml文件，看Firefox欣赏器下是够笔墨溢出省略号表示”。至此，几乎全部主流欣赏器都实现笔墨溢出省略号表示。 .zxx_text_overflow_3{width:27em; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; -moz-binding:url('ellipsis.xml#ellipsis'); overflow:hidden;} 这里有个小结论：这个使Firefox欣赏器下笔墨溢出省略号表示的ellipsis.xml文件要在页面的同一目录下，或是下一级目录下（我已测试），假如向上跨文件夹访问或尽对路径访问则掉效。原因起因不详！ 3.使用:after伪类和content实现笔墨溢出后省略号表示（严重不推荐！直接跳过）愤慨：我着实忍不住了，我要臭骂一通。我很久之前就自己试过content实现后面的省略号表示，发现题目很多，遂想了其他方法。 今天我本想找从前一名兄弟使用图片实现近似效果的方法，发现网上俄然出现了标题“为兼容IE,FF笔墨溢出省略号表现的文章”，着实就一篇，很多我很鄙视的教程网站都有（恰好打上了热门关键字啊）。 我原本试试先容这个方法的，但是我着实做不下往了！这个方法根本不行，一点都不行！假如N年前，只有IE6和Firefox欣赏器的时间，这个方法或答应以试试。而今根本不行，在而今看来，写文章的人就是个大草包，要么是个史前期间过来的程序员，文章里面错误一大堆，用胡说八道形容一点都不为过，很多东西根本没有经过验证就那儿大放厥词。1、说是兼容，着实反而大大破坏了兼容性，IE6和IE7下的表现就不一样，一句IE“不支持max-width”就让我想给作者扇个耳光，IE7不支持吗，别告诉我你写这文章时还没有IE7欣赏器。2、本来chrome欣赏器，Safari还有opera可以实现笔墨溢出省略号表现的，而今受限与:after和content，就会一处理不当，笔墨直接被截，就很丑了。3、多套用了一层标签，css也多了好几行，没有必要，资源斲丧高。4、当笔墨很短时后面也还随着个省略号，没有溢出为甚么还要表现省略号呢？ 总之，结论就是这个方法一点点实用价值都没有。所以严重不推荐！ 4.我自己想出来的方法：margin负值定位法——兼容全部主流欣赏器这是一个比较短的笔墨。 … 这是一段比较长的笔墨，用来测试是不是笔墨溢出时会用省略号表现。 … HTML部分： 这是一段比较长的笔墨，用来测试是不是笔墨溢出时会用省略号表现。 … CSS部分：.zxx_text_overflow_4{width:24em; height:1.3em; overflow:hidden; zoom:1;}.zxx_text_overflow_4 .text_con{float:left; height:1.3em; margin-right:3em; overflow:hidden;}.zxx_text_overflow_4 .text_dotted{width:3em; height:1.31em; float:right; margin-top:-1.3em;} 扼要说明：此方法兼容IE6，IE7（IE8未测过），Firefox，chrome，Safari，opera欣赏器。没有hack，没有冷僻的css样式。笔墨短时，没有省略号，笔墨溢出时就出现省略号。可以说是相当不错的一个方法。道理也很简单：当笔墨内容充足长时就把隐躲在上面的省略号层给挤下来了。关键就是点点点地点div层的高度的尽对值要比其margin的尽对值大那么一点点。 5.jQuery限定字符字数的方法我的笔墨个数较少，不要杀卧丁 你个杀千刀的，怎么写了这么多的笔墨，我要被拦腰... HTML部分：你个杀千刀的，怎么写了这么多的笔墨，我要被拦腰截断了啊，天啊！ 没有css啦，只有js代码：$(document).ready(function(){ //限定字符个数 $(".zxx_text_overflow_5").each(function(){ var maxwidth=23; if($(this).text().length>maxwidth){ $(this).text($(this).text().substring(0,maxwidth)); $(this).html($(this).html()+'...'); } });}); 6.jQuery自动判定宽度是不是超出的方法我的笔墨个数较少，不要杀卧丁 你个杀千刀的，怎么写了这么多的笔墨，我要被拦腰截断... HTML部分：你个杀千刀的，怎么写了这么多的笔墨，我要被拦腰截断了啊，kitty救卧丁 css部分：.zxx_text_overflow_6{width:400px;} js部分：var wordLimit=function(){ $(".zxx_text_overflow_6").each(function(){ var copyThis = $(this.cloneNode(true)).hide().css({ 'position': 'absolute', 'width': 'auto', 'overflow': 'visible' }); $(this).after(copyThis); if(copyThis.width()>$(this).width()){ $(this).text($(this).text().substring(0,$(this).html().length-4)); $(this).html($(this).html()+'...'); copyThis.remove(); wordLimit(); }else{ copyThis.remove(); //断根复制 return; } });}wordLimit(); 两个jQuery方法都是自己写的，不算太难。前者直接限定字符个数，后者通过宽度判定，往掉末了一个字符，循环，直到笔墨内容宽度小于div的限定宽度。
KKKKKKKKKKK 你而今好吗
绿风汽车拍照(17):咀嚼韩活动感 抢先体验起亚全新中级车K5
2010年工作总结
阅读(349) | 评论(0) | 转发(0) |
