CSS 多行文本最后省略号“...” 多行文本最后一行超出的部分隐藏并显示省略号的方法

最新推荐文章于 2024-04-27 21:35:02 发布

土豆程序媛

最新推荐文章于 2024-04-27 21:35:02 发布

阅读量2.3k

点赞数 1

分类专栏： CSS 文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_33235680/article/details/123383817

版权

CSS 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

页面

<p class="content">
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。
<div class="more">查看全文</div>
</p>

1、针对一行超出部分，隐藏并显示省略号的，代码如下：

overflow:hidden;
white-space:norwrap;
text-overflow:hidden;

2、针对webkit浏览器，多行显示时可以通过以下css代码实现，但对于非webkit浏览器，这种写法没有效了。

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow:ellipsis;

3、有没有一种通用的方法来实现，当然有，通过伪类:after来实现

.content{
    overflow: hidden;
    position: relative;
    line-height: 20px; 
    max-height: 40px;
}

.content:after{
    content: "...";
    position: absolute;
    bottom: 0;
    right: 5px;
    padding-left: 4px;
    background: linear-gradient(to right, transparent, #fff 55%);
}

.more{
    position: absolute;
    bottom: 0;
    color: #2522ff;
    right: 283px;
    z-index: 9;
    cursor: pointer;
}

备注：
1、将height设置为line-height的整数倍，防止超出的文字露出。
2、给.content::after添加渐变背景可避免文字只显示一半。
3、由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：<span>…<span/>）；兼容ie8需要将::after替换成:after。