css实现单行/多行的超出文本的裁剪、省略号

最新推荐文章于 2024-07-24 10:23:02 发布

Ace.三阶斗尊

最新推荐文章于 2024-07-24 10:23:02 发布

阅读量2k

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_42231156/article/details/84565677

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

添加小程序，兑换各种视频教程/数据资源。

1.单行的文本超出省略号、裁剪：

overflow: hidden;
text-overflow:ellipsis;   //取值clip为裁剪
white-space: nowrap;

2.多行文本超出省略号：

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

3.多行文本超出省略号且最字体半透明：

p{
    position: relative; 
    line-height: 20px; 
    max-height: 40px;
    overflow: hidden;
}
p::after{
    content: "..."; 
    position: absolute;
    bottom: 0; 
    right: 0; 
    padding-left: 40px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(right, transparent, #fff 55%);
    background: -moz-linear-gradient(right, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
}