溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了css如何實現三個點隱藏的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇css如何實現三個點隱藏文章都會有所收獲，下面我們一起來看看吧。
css實現三個點隱藏的方法：1、單行情況下，通過css屬性“text-overflow: ellipsis;”可以實現將文本溢出顯示為三個點；2、多行情況下，通過屬性“overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;”即可實現。
css文字溢出隱藏為三個點
(1)單行
white-space: nowrap;//不換行
text-overflow: ellipsis;//將文本溢出顯示為（…）
overflow: hidden;//溢出隱藏。
(2)多行
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
注：text-overflow 屬性指定當文本溢出包含它的元素時，應該如何顯示。可以設置溢出后，文本被剪切、顯示省略號 (...) 或顯示自定義字符串（不是所有瀏覽器都支持）。
text-overflow 需要配合以下兩個屬性使用：
white-space: nowrap;
overflow: hidden;
語法
text-overflow: clip|ellipsis|string|initial|inherit;
值
clip 剪切文本。
ellipsis 顯示省略符號 ... 來代表被修剪的文本。
string 使用給定的字符串來代表被修剪的文本。
initial 設置為屬性默認值。
inherit 從父元素繼承該屬性值。
關于“css如何實現三個點隱藏”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“css如何實現三個點隱藏”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
