css实现单行、多行文本溢出显示省略号


通常我们开发前端页面时候经常会遇到文本溢出显示省略号的问题。

如果单行文本溢出的话大家应该知道通常我们会使用text-overflow:ellipsis与width配合实现:
.textOverflow1{
    width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
效果如下所示:(你可以试用调试工具查看全部的文字)
欢迎访问Lidada博客在这里我们可以一起交流前端技术。
这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号就要像下面这样写了:
.textOverflow2 {
    position:relative;
    line-height:1.4em;
    /* 3 times the line-height to show 3 lines */
    height:4.2em;
    overflow:hidden;
}
.textOverflow2::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
    background:url(http://lidada.org/wp-content/uploads/2017/11/overflow_bg.png) repeat-y;
}
效果如下所示:

欢迎访问Lidada博客在这里我们可以一起交流前端技术。欢迎访问Lidada博客在这里我们可以一起交流前端技术。欢迎访问Lidada博客在这里我们可以一起交流前端技术。欢迎访问Lidada博客在这里我们可以一起交流前端技术。欢迎访问Lidada博客在这里我们可以一起交流前端技术。欢迎访问Lidada博客在这里我们可以一起交流前端技术。欢迎访问Lidada博客在这里我们可以一起交流前端技术。欢迎访问Lidada博客在这里我们可以一起交流前端技术。

这里注意几点:
  1. height高度真好是line-height的3倍;
  2. 结束的省略好用了半透明的png做了减淡的效果,或者设置背景颜色;
  3. IE6-7不显示content内容,所以要兼容IE6-7可以是在内容中加入一个标签,比如用<span class="line-clamp">...</span>去模拟;
  4. 要支持IE8,需要将::after替换成:after


查看原文:http://lidada.org/text_overflow/
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_40293861/article/details/78622564
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭