一起CSS

当前位置:一起CSS > CSS > 文章正文

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

日期:2009-03-22 分类:CSS

曾经发表过《我看超过部分自动隐藏或显示省略号》,表达了用 CSS 处理“超过宽度显示省略号”不合适的一些观点,然而前段时间在逛蓝色理想经典论坛的时候,发现了一种用 CSS 处理此问题的不错的办法,似乎反驳了我的观点,作者[14px ]突破了传统,以“范围底线”为思路创造了一种更好的办法,具体的思路请看以下的详细分析:

思路:

我们要达到的效果是:当“字符超过额定宽度”,则“显示三个小点”。

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

图片说明:

超过宽度显示省略号

查看效果

上图是经过我(即29楼的“xfcmamb”)的优化之后,作者发布的第二个方案,要看作者的第一个方案及我第二次优化的方案请点击下面相应的链接:

原作者的方案:http://bbs.blueidea.com/thread-2915238-1-2.html

第二次优化的方案:http://bbs.blueidea.com/thread-2916138-1-1.html

在目前我所知道的方法中,我认为这种方法是最好的方法,但缺点还是有的,比如:要更具具体的行高制作合适的背景图片,也就是说如果图片做的不合适,“省略号”的显示位置可能会不合理。

如果您有什么观点或更好的办法,欢迎发表留言。

查看:1,511 评论:11

随机日志

共有 11 条评论

发表留言

请言之有物,无意义留言或只为留链接留言一律不予通过!

提示: 您可以使用一些简单的标签: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

分类

最新日志

最新评论

存档

链接

  • 亚当学院
  • CSS视频教程下载
  • 前沿视频教室
  • 前端爱好者
  • GoodText
  • Kily`s Blog
  • mymickey
  • 秦丰网站策划
  • 奥想创意
  • 我的职业生涯
  • 蜗爱CSS
  • 蜈蚣's Blog
  • web标准学习—小辉博客
  • 十字花匠

© Copyright 2010 一起CSS All Rights Reserved