收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 33503|回复: 50

[教程] 超过宽度显示省略号(无js全兼容)

[复制链接]
发表于 2009-3-10 04:50:56 | 显示全部楼层 |阅读模式
----------------------------------------------------------------
★本教程蓝色理想经典论坛首发,转载请注明出处★
----------------------------------------------------------------

PS. 由于使用的附件作为图片,使用其他浏览器测试时,保证登录才能看到完整效果。
或者点此下载原始版本 | 点此下载优化版本
·感谢by0001提供的下载包
·感谢xfcmamb的优化


^-^ 三更半夜果然适于思考,办法有点怪,让我们先看看效果:

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



大家可以试试将li标签的宽度修改后进行测试。

接下来有兴趣的朋友可以看看原理的解释:

思路:
我们要达到的效果是:当“字符超过额定宽度”,则“显示三个小点”。
=> 当“字符超过额定宽度”,对于页面来说可能发生的一个改变就是:换行!
=> 换行将导致该范围的底线降低。
=> 那么,我们的目的则可以换算成:该范围的底线降低时显示三个小点。
ddd.gif

英文句子和连续字母/数字测试效果在非IE下欠佳(因为不自动换行),可以配合js来完善。
有好的建议或意见,请多多指教。
-----------------------------------------------以下是优化过的版本----------------------------------------------------xfcmamb 在29楼做出了进一步的优化处理,得到一个更好的版本。
此次修改主要的优化方面如下:
1. 去掉了div标签,结构更加紧凑。
2. 将宽度范围的设定移至外框,具有更强的可移植性,内部结构可以更自由调整。

(源码与29楼有细微区别)

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



原理图:
原理图.gif

[[i] 本帖最后由 14px 于 2009-3-11 11:39 编辑 ]
ico.gif
pot.gif

无hack无js全兼容text-overflow-ellipsis效果.rar

1.04 KB, 下载次数: 910

评分

参与人数 1威望 +2 收起 理由
goos + 2 有才!

查看全部评分

发表于 2009-3-10 08:04:40 | 显示全部楼层
不错。。。
真不错。。。
太有想法了。。。
凌晨四五点钟。。。
真不容易。。。
回复 支持 反对

使用道具 举报

发表于 2009-3-10 08:11:25 | 显示全部楼层
是不是超出固定范围就显示三点省略...
iif(len(title)>15,left(title,15)+"...",title)
回复 支持 反对

使用道具 举报

发表于 2009-3-10 08:42:31 | 显示全部楼层
绝对经典,标记留用。但是LZ的方法可能会出现末尾的字之显示一半的情况

[[i] 本帖最后由 jsw0528 于 2009-3-10 09:06 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2009-3-10 09:37:55 | 显示全部楼层
http://bbs.blueidea.com/attachme ... 40&noupdate=yes

楼主是用这个做li的背景来模拟那三个点吗?连省略号也这么复杂。。。唉
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-3-10 09:38:05 | 显示全部楼层
原帖由 [i]radom 于 2009-3-10 08:11 发表
是不是超出固定范围就显示三点省略...
iif(len(title)>15,left(title,15)+"...",title)

呃...这是js方法,确实简单实用。
但纯css方法也主要是提供一个思路。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-3-10 09:38:33 | 显示全部楼层
原帖由 [i]jsw0528 于 2009-3-10 08:42 发表
绝对经典,标记留用。但是LZ的方法可能会出现末尾的字之显示一半的情况

不会的,我利用是换行,试问半个字符如何存在换行?
回复 支持 反对

使用道具 举报

发表于 2009-3-10 09:45:29 | 显示全部楼层
想法很好,但在我这儿除了IE别的浏览器都不显示楼主说的...
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-3-10 09:53:32 | 显示全部楼层
不是吧,主流浏览器我只有FF3/SF4/CHROME2/OP10没有测试了。
IE5.5/IE6/IE7/IE8 RC1/FF2/SF3/CHROME1/OP9均能看到啊。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-3-10 09:55:33 | 显示全部楼层
原帖由 [i]4769946 于 2009-3-10 09:37 发表
http://bbs.blueidea.com/attachme ... 40&noupdate=yes

楼主是用这个做li的背景来模拟那三个点吗?连省略号也这么复杂。。。唉


- -! 这个是li标签前面的小方点...
回复 支持 反对

使用道具 举报

发表于 2009-3-10 10:01:26 | 显示全部楼层
我这儿FF2/FF3/OP8/CHROME1我这儿都看不到
为什么,这是为什么……
回复 支持 反对

使用道具 举报

发表于 2009-3-10 10:02:56 | 显示全部楼层
难道是要改些什么代码?原理看楼主解释的很详细,我也看懂了,就是看不到效果
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-3-10 10:07:32 | 显示全部楼层
谢谢13楼的大哥细心检测... - -! 我只在本地测试了无误,然后发现直接在这里测试真的不显示。
然后原因是:因为你这个浏览器下没登录...看不到图片 - -!
斑竹大人,您看这有什么办法改改不?

[[i] 本帖最后由 14px 于 2009-3-10 10:08 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2009-3-10 10:13:41 | 显示全部楼层
对头,我刚要说,登录后就能看到图片了
回复 支持 反对

使用道具 举报

发表于 2009-3-10 10:24:14 | 显示全部楼层
Orz 为什么我登录了也看不到啊……
不过看代码也一样了。这个想法不错。
回复 支持 反对

使用道具 举报

发表于 2009-3-10 10:39:47 | 显示全部楼层
非常有想法,赞一个!
开始我也只有在IE6下才能看,后来将图片下载到本机后就可以看了.
测试过IE6,IE7,FF3,CHOME,TT.
不过有个遗憾,就是嵌套似乎多了点,要能更精简点就好了,总之是非常不错的想法.
给你打个包吧,方便大家观看:
下载: 无hack无js全兼容text-overflow-ellipsis效果.rar (1.41 KB, 下载次数: 545)
回复 支持 反对

使用道具 举报

发表于 2009-3-10 10:40:15 | 显示全部楼层
原帖由 [i]14px 于 2009-3-10 10:07 发表
谢谢13楼的大哥细心检测... - -! 我只在本地测试了无误,然后发现直接在这里测试真的不显示。
然后原因是:因为你这个浏览器下没登录...看不到图片 - -!
斑竹大人,您看这有什么办法改改不?


回复:

建议注册并登录,您能享受更好的BI服务~
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-3-10 10:41:10 | 显示全部楼层
原帖由 [i]by0001 于 2009-3-10 10:39 发表
非常有想法,赞一个!
开始我也只有在IE6下才能看,后来将图片下载到本机后就可以看了.
测试过IE6,IE7,FF3,CHOME,TT
给你打个包吧,方便大家观看:
下载:[local]demo[/local]

不过有个遗憾,就是嵌套似乎多了点,要能 ...

谢谢大哥,嘿嘿,放到帖子里去。
用这个方法的话,嵌套方面我也想不出更精减的办法来了...个人觉得每一个标签分工都很明细,一时找不着替代的方法。

[[i] 本帖最后由 14px 于 2009-3-10 10:47 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2009-3-10 16:32:08 | 显示全部楼层

回复 1# 14px [楼主] 的帖子

连续英文和数字可以用word-break:break-all处理IE的问题。
回复 支持 反对

使用道具 举报

发表于 2009-3-10 23:22:23 | 显示全部楼层
这是目前我见到的最好的方法。。。
看不到的下载到本地看。。。
回复 支持 反对

使用道具 举报

发表于 2009-3-11 00:45:33 | 显示全部楼层
楼主,小小的改了一下,把 li 里的 div 去掉了,测试通过 IE6/IE7/IE8/FF3/OP10/CH

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


[[i] 本帖最后由 xfcmamb 于 2009-3-11 00:51 编辑 ]
ico.gif
pot.gif
回复 支持 反对

使用道具 举报

发表于 2009-3-11 02:38:37 | 显示全部楼层
LS 的优化的不错~~ LZ思路很赚~~
当然还是存在缺陷滴~~例如全选的时候~~ span 的就位置就空了~~~虽然LS已经改进了大部分问题~!
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-3-11 10:33:10 | 显示全部楼层
原帖由 [i]greengnn 于 2009-3-10 16:32 发表
连续英文和数字可以用word-break:break-all处理IE的问题。

是啊,所以我才说“非IE”下存在问题嘛~``呃,现在看来safari3还是支持的,但IE8 RC1不支持。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-3-11 10:36:44 | 显示全部楼层
原帖由 [i]xfcmamb 于 2009-3-11 00:45 发表
楼主,小小的改了一下,把 li 里的 div 去掉了,...


太牛了,哈哈我仔细看了一下,明显不止是把div去掉了那么简单``~`
当初加上div是不舍得a的inline属性,在你的优化下,发现更多的好处了,我一会就把你的优化补到帖子里去。
抛出砖引来玉,赚翻了。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-3-11 11:40:51 | 显示全部楼层
^-^在你的基础上做了一点点调整,希望不要介意。
回复 支持 反对

使用道具 举报

发表于 2009-3-11 13:45:49 | 显示全部楼层
遗憾的是无意义标签太多了
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-3-13 21:21:52 | 显示全部楼层
在xfcmamb的帮助下,后文中有了优化版本:)只多出了一个span空标签。
现在的致伤在于只能使用纯色背景,我正在进一步优化。谢谢大家的支持。
回复 支持 反对

使用道具 举报

发表于 2009-3-15 02:37:00 | 显示全部楼层
我也改了一点点。思路还是抄楼主的。
主要是去掉了空标签跟图片。。但是代价是hack...   
虽然可以让...在链接里面。。但是。。。
TMD这东东居然跟炼金术一样--等价交换
该解决的已经解决,不能解决的还是没去解决。

说实话,text-overflow: ellipsis 还有很多神奇的属性,不容易模拟。
实际应用时,我估计也不会这样用,不过在做的过程中也发现了一些我以前不知道滴东东 ^^ 还是赚了
大家看下我滴。

修改了一下字体,算是修了个隐藏的bug

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


[[i] 本帖最后由 aoao 于 2009-3-15 18:24 编辑 ]
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-3-16 00:51:31 | 显示全部楼层
多谢前辈指点~!~

细看了一下,我的理解是这样的:
1. 支持text-overflow的浏览器直接使用text-overflow。
2. FF下:利用li:after的content属性来制作三个小点。
3. FF下:利用a:after的content属性来制作一个1em大小的框(一个全角空格)用于换行时遮住三个小点。

前辈考虑得果然是周全些,这方法的好处:
1. html结构更简单。
2. 未使用图片,保证了三个小点的本质是文字符号。
3. 使用em单位,用户可自行调整文字大小,调整文字大小时亦能完整显示、三个小点随之增大。

但我始终没搞明白:
·那个空格是如何遮住这些小点的,换两行时向上1.6em倒还正常,到第三行了怎么还能遮住咧?难道自动变成3.2em啦?太神奇了~
·另外后文中说的,字体的修改,是怕全角空格遮不住三个字节的小点不?
·“text-overflow: ellipsis 还有很多神奇的属性”是指啥咧?
回复 支持 反对

使用道具 举报

发表于 2009-3-16 21:27:01 | 显示全部楼层
原帖由 [i]14px 于 2009-3-16 00:51 发表
·那个空格是如何遮住这些小点的,换两行时向上1.6em倒还正常,到第三行了怎么还能遮住咧?难道自动变成3.2em啦?太神奇了~
·另外后文中说的,字体的修改,是怕全角空格遮不住三个字节的小点不?
·“text-overflow: ellipsis 还有很多神奇的属性”是指啥咧?


·空格不是用来遮挡掉三个小点。其实不一定是空格,什么都可以,呵呵,我现在是直接用background-color的,所以没什么关系,我还试过只用三个小点来遮,减少一定要做背景纯色的问题,不过不能真正解决,而遮的时机也是不换行时才要遮,换行时就不用了,思路跟你的一样。
·字体的修改是为了有些firefox默认英文是用宋体显示,占用空间过大,比如我现在借来用的本本就是。
·神奇的属性:比如你在ie选一下小点,可以显示文字;如果是ie8,可以用光标显示那一行所有的内容。截字的算法可以直接看效果。呵呵。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-8-6 04:48 , Processed in 0.168521 second(s), 11 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表