共計 568 個字符，預計需要花費 2 分鐘才能閱讀完成。

這篇文章主要介紹了 css 如何實現超出部分顯示省略號，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓丸趣 TV 小編帶著大家一起了解一下。

超出部分顯示省略號

//  單行文本
.wrap {
 overflow:hidden;/* 超出部分隱藏 */
 text-overflow:ellipsis;/* 超出部分顯示省略號 */
 white-space:nowrap;/* 規定段落中的文本不進行換行  */
//  多行文本
.wrap {
 width: 100%;
 overflow: hidden;
 display: -webkit-box; // 將對象作為彈性伸縮盒子模型顯示  * 必須結合的屬性 *
 -webkit-box-orient: vertical; // 設置伸縮盒對象的子元素的排列方式  * 必須結合的屬性 *
 -webkit-line-clamp: 3; // 用來限制在一個塊元素中顯示的文本的行數
 word-break: break-all; // 讓瀏覽器實現在任意位置的換行  *break-all 為允許在單詞內換行 *
}

感謝你能夠認真閱讀完這篇文章，希望丸趣 TV 小編分享的“css 如何實現超出部分顯示省略號”這篇文章對大家有幫助，同時也希望大家多多支持丸趣 TV，關注丸趣 TV 行業資訊頻道，更多相關知識等著你來學習!