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%);
        }

效果同上