超过宽度显示省略号(无js全兼容)
曾经发表过《我看超过部分自动隐藏或显示省略号》,表达了用 CSS 处理“超过宽度显示省略号”不合适的一些观点,然而前段时间在逛蓝色理想经典论坛的时候,发现了一种用 CSS 处理此问题的不错的办法,似乎反驳了我的观点,作者[14px ]突破了传统,以“范围底线”为思路创造了一种更好的办法,具体的思路请看以下的详细分析:
思路:
我们要达到的效果是:当“字符超过额定宽度”,则“显示三个小点”。
- 当“字符超过额定宽度”,对于页面来说可能发生的一个改变就是:换行!
- 换行将导致该范围的底线降低。
- 那么,我们的目的则可以换算成:该范围的底线降低时显示三个小点。
图片说明:

上图是经过我(即29楼的“xfcmamb”)的优化之后,作者发布的第二个方案,要看作者的第一个方案及我第二次优化的方案请点击下面相应的链接:
原作者的方案:http://bbs.blueidea.com/thread-2915238-1-2.html
第二次优化的方案:http://bbs.blueidea.com/thread-2916138-1-1.html
在目前我所知道的方法中,我认为这种方法是最好的方法,但缺点还是有的,比如:要更具具体的行高制作合适的背景图片,也就是说如果图片做的不合适,“省略号”的显示位置可能会不合理。
如果您有什么观点或更好的办法,欢迎发表留言。