打印

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

----------------------------------------------------------------
★本教程蓝色理想经典论坛首发,转载请注明出处★
----------------------------------------------------------------

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


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

 提示:您可以先修改部分代码再运行
大家可以试试将li标签的宽度修改后进行测试。

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

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


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

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

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


[ 本帖最后由 14px 于 2009-3-11 11:39 编辑 ]
附件: 您所在的用户组无法下载或查看附件,您需要注册/登录后才能查看!
本帖最近评分记录
  • goos 威望 +2 有才! 2009-3-10 09:37
不错。。。
真不错。。。
太有想法了。。。
凌晨四五点钟。。。
真不容易。。。
开发郁闷期
是不是超出固定范围就显示三点省略...
iif(len(title)>15,left(title,15)+"...",title)
Web Developer XHTML+CSS+JS+JQ……

TOP

绝对经典,标记留用。但是LZ的方法可能会出现末尾的字之显示一半的情况

[ 本帖最后由 jsw0528 于 2009-3-10 09:06 编辑 ]

TOP

我已阅过,感觉良好

TOP

回复 2# mlmuller 的帖子

谢谢捧场,睡觉之前突然想到,赶紧做出来...结果一发教程就到这个时候了。

TOP

http://bbs.blueidea.com/attachme ... 40&noupdate=yes

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

TOP

引用:
原帖由 radom 于 2009-3-10 08:11 发表
是不是超出固定范围就显示三点省略...
iif(len(title)>15,left(title,15)+"...",title)
呃...这是js方法,确实简单实用。
但纯css方法也主要是提供一个思路。

TOP

引用:
原帖由 jsw0528 于 2009-3-10 08:42 发表
绝对经典,标记留用。但是LZ的方法可能会出现末尾的字之显示一半的情况
不会的,我利用是换行,试问半个字符如何存在换行?

TOP

想法很好,但在我这儿除了IE别的浏览器都不显示楼主说的...
♀璨如烟花 静如流年♀

TOP

不是吧,主流浏览器我只有FF3/SF4/CHROME2/OP10没有测试了。
IE5.5/IE6/IE7/IE8 RC1/FF2/SF3/CHROME1/OP9均能看到啊。

TOP

引用:
原帖由 4769946 于 2009-3-10 09:37 发表
http://bbs.blueidea.com/attachme ... 40&noupdate=yes

楼主是用这个做li的背景来模拟那三个点吗?连省略号也这么复杂。。。唉
- -! 这个是li标签前面的小方点...

TOP

我这儿FF2/FF3/OP8/CHROME1我这儿都看不到
为什么,这是为什么……
♀璨如烟花 静如流年♀

TOP

难道是要改些什么代码?原理看楼主解释的很详细,我也看懂了,就是看不到效果
♀璨如烟花 静如流年♀

TOP

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

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

TOP

对头,我刚要说,登录后就能看到图片了
♀璨如烟花 静如流年♀

TOP

Orz 为什么我登录了也看不到啊……
不过看代码也一样了。这个想法不错。

TOP

非常有想法,赞一个!
开始我也只有在IE6下才能看,后来将图片下载到本机后就可以看了.
测试过IE6,IE7,FF3,CHOME,TT.
不过有个遗憾,就是嵌套似乎多了点,要能更精简点就好了,总之是非常不错的想法.
给你打个包吧,方便大家观看:
下载:

[ 本帖最后由 by0001 于 2009-3-10 10:40 编辑 ]
附件: 您所在的用户组无法下载或查看附件,您需要注册/登录后才能查看!

TOP

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

建议注册并登录,您能享受更好的BI服务~

TOP

天啦,我又用op登录了一次,显示得很快啊。

TOP

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

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

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

TOP

引用:
原帖由 goos 于 2009-3-10 10:40 发表
回复:
建议注册并登录,您能享受更好的BI服务~
怎么听都像广告啊。

TOP

我试了,好用。呵呵...以后,我也在晚上想东西,说不定也么能想到一些什么,呵呵...非赏感谢.

TOP

图示做的很好。一目了然!

TOP

看得出楼主思维相当逻辑,教程都写的这么清晰易懂。
web设计师群:47071188

TOP

好想法,有意思。

想起轮船过水坝的方法。

TOP

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

连续英文和数字可以用word-break:break-all处理IE的问题。
blog Web标准化交流会 WEB标准群:46077068

TOP

这是目前我见到的最好的方法。。。
看不到的下载到本地看。。。

TOP

楼主,小小的改了一下,把 li 里的 div 去掉了,测试通过 IE6/IE7/IE8/FF3/OP10/CH

 提示:您可以先修改部分代码再运行
[ 本帖最后由 xfcmamb 于 2009-3-11 00:51 编辑 ]
附件: 您所在的用户组无法下载或查看附件,您需要注册/登录后才能查看!

TOP

LS 的优化的不错~~ LZ思路很赚~~
当然还是存在缺陷滴~~例如全选的时候~~ span 的就位置就空了~~~虽然LS已经改进了大部分问题~!

TOP