css不受高度限制实现文本超出隐藏并以省略号结束

 

文本超出省略号显示代码：

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
width: 100px;  /*宽度做好限制*/

文本文本文本文本文本...

 

不考虑兼容性的，适用于WebKit浏览器内核的

 

width: 100px;
height: 65px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; /*截取到第三行*/
overflow: hidden;

 

文本文本文本文本文本

文本文本文本文本文本

文本文本文本文本文...

 

容器设置溢出隐藏、并手动设置生成一个内容为“...”的伪元素

 .box {
            width: 400px;
            height: 100px;
            margin: 100px auto;
            border: 1px solid #ccc;
            position: relative;
            line-height: 20px;
            overflow: hidden;
        }

        .box::after {
            content: "...";
            position: absolute;
            bottom: 0;
            right: 0;
            padding-left: 10px;
            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%);
        }

效果同上

 

转载于:https://www.cnblogs.com/Shd-Study/p/9945088.html