当前位置：首页 → 问答吧 → 再次优化[超过宽度显示省略号（无js全兼容）]

再次优化[超过宽度显示省略号（无js全兼容）]

时间：2009-03-14

来源：互联网

作者[14px]思维独特，写出了《超过宽度显示省略号（无js全兼容）》，得到较多朋友的支持。而我在29楼作了下小小的优化，虽然已经去掉了一些无语义的标签，但仍然有一个无语义的标签 span 。
今日凌晨1点突然又有一个想法，于是再次优化，此次优化去除了后面无语义的标签 span ，不必担心某个父元素是否有背景色或背景图片。具体思路看原作者的（同一原理），具体代码如下（注意看背景图片，主要就是靠它）：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> body,ul{ margin:0; padding:0; } body{ font-family:Arial, Helvetica, sans-serif; font-size:12px; } ul{ width:11em; list-style:none; } li{ width:11em; height:24px; line-height:24px; overflow:hidden; } li a{ display:block; padding-right:1em; color:#222; text-decoration:none; background:url(http://www.17css.com/works/09/03/images/pot1.gif) no-repeat right bottom; } li a:hover{ color:#F63; text-decoration:underline; } </style> </head> <body> <ul> <li><a href="#nogo">该标签中字符超过十个了</a></li> <li><a href="#nogo">只有六个汉字</a></li> <li><a href="#nogo">该标签中字符超过三十个了该标签中字符超过三十个了</a></li> <li><a href="#nogo">blueidea blueidea blueidea</a></li> </ul> </body> </html>
提示：您可以先修改部分代码再运行

测试通过：IE6 IE7 IE8 FF3 OP10 CH开发版

虽然我觉得这是目前比较好的办法，但缺点肯定还是有的：
1、可能需要根据具体的情况制作“省略号”的背景图片（主要是 li 的高度）；
2、……；

[ 本帖最后由 xfcmamb 于 2009-3-14 10:25 编辑 ]

作者: xfcmamb 发布时间: 2009-03-14

我觉得用图片做省略号也不太好。。。。如果这个页面好多省略号的地方，那不卡死。。。-。-

作者: dlcc 发布时间: 2009-03-14

没听说过 CSS Sprites 吗？

作者: xfcmamb 发布时间: 2009-03-14

没有~~那是什么啊~

作者: dlcc 发布时间: 2009-03-14

哈哈顶~`我们想到一块去了，不过我的出发点并不是少这一个span，主要是为了解决背景不透明的问题。
li的项目列表符当然能做，放入li标签的背景就是了。
现在仍然存在一点小bug，我觉得我们应该给这个省略号的图片一个足够高的高度，保证字数超过x行亦能完成其目的。
我这样想的，一般来说显示的字数应该不会少于5个字，而字符最多不会超过50字，50/5=10，第一行是空行，所以制作9个这样的符号即可。我用ps导出的gif，该图片大小仅121字节。
另外，细节问题，个人觉得li { width:auto;}好一点，这样可以保持足够的自适应性。

回2楼的问题：
不错，使用图片没有使用字符好，原因如下：
1. 9行省略号的字节数为121，字符为3字节。
2. 增加一个连接数。

但：
1. 图片仅加载一次，使用多少次都是121字节，你在一个项目中使用41次则超过这一限额。
2. css sprites技术可以使其根本不用增加连接数。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> body,ul{ margin:0; padding:0; } body{ font-family:Arial, Helvetica, sans-serif; font-size:12px; } ul{ width:11em; list-style:none; } li{ padding-left:1em; background:url(http://bbs.blueidea.com/attachment.php?aid=113548&k=6d533006511674b8eb33c5a6bb44e706&t=1236995937&noupdate=yes) no-repeat 3px 8px; height:24px; line-height:24px; overflow:hidden; } li a{ display:block; padding-right:1em; color:#222; text-decoration:none; background:url(http://bbs.blueidea.com/attachment.php?aid=113808&k=7d1a37f4da7a723871ef313d588f20bb&t=1236995504&noupdate=yes) no-repeat right bottom; max-height:240px; overflow:hidden; } li a:hover{ color:#F63; text-decoration:underline; } </style> </head> <body> <ul> <li><a href="#nogo">该标签中字符超过十个了</a></li> <li><a href="#nogo">只有六个汉字</a></li> <li><a href="#nogo">真的超过三十个了真的超过三十个了真的超过三十个了真的超过三十个了</a></li> <li><a href="#nogo">blueidea blueidea blueidea</a></li> </ul> </body> </html>
提示：您可以先修改部分代码再运行

[ 本帖最后由 14px 于 2009-3-14 10:04 编辑 ]