一起CSS

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

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

曾经发表过《我看超过部分自动隐藏或显示省略号》,表达了用 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

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

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

查看:4,578 评论:11

随机日志

已经有 11 条群众意见

  1. 踏雪残情

    虽然局限性比较多,比如图片省略号的个数要根据字的行数来制作,但是用图片做省略号这种思想真的值得借鉴! 对话

    #1
  2. 青色踏雪残情

    这个不是主要问题,你可以做个 5 行的甚至更多行的背景图片,我觉得最主要的问题是要根据具体的行高来制作背景图片。 对话

    #2
  3. Sinina

    思路挺不错,但是测试的时候其实还是发现了问题,如果一个英文的单词很长的话,那么很早就换行了哦。
    虽然说制作图片确实很不方便,但是也是没有办法的办法,谁让FF等无法实现呢。。。谢谢你的思路,很有创新性。 对话

    #3
  4. kily_zhou

    不错..相当灵活的方法..这个方法貌似可以用在WP博客上哦. 对话

    #4
  5. 青色kily_zhou

    什么地方都可以。 对话

    #5
  6. chance

    很有意思的想法!

    不过要求很精细~~ 对话

    #6
  7. keelii

    哇下面是温老师吗! 对话

    #7
  8. adminkeelii

    Yes ! 对话

    #8
  9. keelii

    呵呵!老师也来青色这里啊。青色很强哦。。嘿嘿! 对话

    #9
  10. 初七

    现在博主主要担心行高的问题,我提供个思路你试试看,我懒得弄了,
    当然写法是。。
    <a></a>
    <a></a>
    <a></a>

    的话,可以把用省略号做成图片以background-position:right center;到LI上,这样A行高变化的时候,省略号默认在右边中间部分,也能应对大部分情况了。 对话

    #10
  11. joey

    绝对是奇技淫巧。。。偶个人认为不应该推崇这样的设计方式。 对话

    #11

我要发表意见