打印

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

xfcmamb [楼主]

青色

中级会员

帖子: 203
体力: 356
威望: 0
当前: 广东深圳
离线: 1 天

1^# 大中小发表于 2009-3-14 02:39

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

提示：您可以先修改部分代码再运行

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

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

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

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

TOP

西部数码分布式集群主机傲视群雄 | Adobe设计师狂欢节在线讲座免注册进入

dlcc

咔哇咿熊熊

高级会员

认证
帖子: 544
体力: 521
威望: 0
当前: 辽宁大连
离线: 63 天

专长 前端制作,策划,网站运营

2^# 大中小发表于 2009-3-14 08:58

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

TOP

PSD网页模板下载,高端实用 | 俄罗斯大蜘蛛反病毒软件

xfcmamb [楼主]

青色

中级会员

帖子: 203
体力: 356
威望: 0
当前: 广东深圳
离线: 1 天

3^# 大中小发表于 2009-3-14 09:18

回复 2# dlcc 的帖子

没听说过 CSS Sprites 吗？

TOP

国际动画人才海外高薪就业

dlcc

咔哇咿熊熊

高级会员

认证
帖子: 544
体力: 521
威望: 0
当前: 辽宁大连
离线: 63 天

专长 前端制作,策划,网站运营

4^# 大中小发表于 2009-3-14 09:32

回复 3# xfcmamb [楼主] 的帖子

没有~~那是什么啊~

TOP

明天教室职业插画师培训计划

14px

秋末

版主

帖子: 1380
体力: 2904
威望: 52
当前: 湖南长沙
离线: 1 天

专长 网页设计,UI,前端制作

5^# 大中小发表于 2009-3-14 09:50

哈哈顶~`我们想到一块去了，不过我的出发点并不是少这一个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 编辑 ]

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

十四像素

TOP

dlcc

咔哇咿熊熊

高级会员

认证
帖子: 544
体力: 521
威望: 0
当前: 辽宁大连
离线: 63 天

专长 前端制作,策划,网站运营

6^# 大中小发表于 2009-3-14 10:03

鼠标经过的时候那个省略号会闪啊闪~~~

TOP

14px

秋末

版主

帖子: 1380
体力: 2904
威望: 52
当前: 湖南长沙
离线: 1 天

专长 网页设计,UI,前端制作

7^# 大中小发表于 2009-3-14 10:11

晕，我这里网速太快，测试不了这问题。
我确实见过，在做滑动门的时候即使使用了css sprites使用也存在这样的问题。

十四像素

TOP

xfcmamb [楼主]

青色

中级会员

帖子: 203
体力: 356
威望: 0
当前: 广东深圳
离线: 1 天

8^# 大中小发表于 2009-3-14 10:14

回复 6# dlcc 的帖子

用的什么浏览器啊？

TOP

dlcc

咔哇咿熊熊

高级会员

认证
帖子: 544
体力: 521
威望: 0
当前: 辽宁大连
离线: 63 天

专长 前端制作,策划,网站运营

9^# 大中小发表于 2009-3-14 10:20

回复 8# xfcmamb [楼主] 的帖子

IE6 啊~~

TOP

birdstudio

CSS魔术师

版主

认证
帖子: 2328
体力: 4659
威望: 4
当前: 上海静安

专长 前端制作,UE

10^# 大中小发表于 2009-3-14 12:03

各位在这个问题上研究得很深入，佩服，顶~~

● 我的微博　　● 我的博客 (已恢复)

TOP

camper

半成品

银牌会员

帖子: 796
体力: 1248
威望: 0
当前: 江苏苏州

专长 网页设计,前端制作,ASP

11^# 大中小发表于 2009-3-14 17:31

如果是HTML，直接手动加。
如果是动态，写个截取字符的函数就好。
感觉这样好麻烦啊，偏离了目的的本身。
当然楼主的精神是好的

http://www.gexingwangming.info

TOP

4769946

VS剑心

中级会员

认证
帖子: 173
体力: 355
威望: 0
当前: 广东广州
离线: 1 天

专长 前端制作,JS,PHP

12^# 大中小发表于 2009-3-16 14:54

完全没必要的做法

人在江湖飘

TOP

kouyubo

扁扁

银牌会员

帖子: 786
体力: 1001
威望: 3
当前: 北京海淀区
离线: 1 天

专长 前端制作

13^# 大中小发表于 2009-3-16 15:47

不错，让人开阔思路

在路上，还要走多远

TOP

fanchw

新手上路

帖子: 2
体力: 8
威望: 0
当前: 陕西西安
离线: 71 天

14^# 大中小发表于 2009-3-23 10:22

回复 11# camper 的帖子

这样的一大好处是没有破坏内容，截取的话能容不完整，也不利于SEO。

TOP

superlazy

初级会员

帖子: 1135
体力: 122
威望: 0

15^# 大中小发表于 2009-3-23 11:02

恩这次的修改就比较有适用性了感谢LZ 的分享

TOP