單行文本和多行文本溢出顯示省略號

1、單行文本

overflow: hidden;

white-space: nowrap; //用于處理元素內的空白，只在一行內顯示

text-overflow: ellipsis; //超過寬度使用省略號

2、多行文本

word-break: break-all;

text-overflow: ellipsis;

display: -webkit-box; ? ? //對象作為伸縮盒子模型顯示

-webkit-box-orient: vertical; ? ?//設置或檢索伸縮盒對象的子元素的排列方式

-webkit-line-clamp: 3; ? ? //顯示的行數

overflow: hidden; ? ?// 隱藏超出的內容

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容