CSS 设置多行文本省略号 ..._text-overflow ???? ???? ???? CSS 设置多行文本省略号 ... -webkit-line-clamp -webkit-box-orient



???? ???? ???? CSS 设置多行文本省略号 ...

CSS 设置多行文本省略号 ..._text-overflow


.box{
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
white-space: normal !important;
-webkit-line-clamp: 3;
/* 行数 3 */
-webkit-box-orient: vertical;

    }


.text {
font-size: 38rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis; 
    }


js 计算 容器高度 = line-height * lines

::after{
content: "...",
}

See the Pen <a href="https://codepen.io/xgqfrms/pen/NWxejZR">Pure CSS multiline text with ellipsis</a> by xgqfrms (<a href="https://codepen.io/xgqfrms">@xgqfrms</a>) on <a href="https://codepen.io">CodePen</a>.