css如何實(shí)現(xiàn)三個(gè)點(diǎn)隱藏

這篇文章主要介紹了css如何實(shí)現(xiàn)三個(gè)點(diǎn)隱藏的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇css如何實(shí)現(xiàn)三個(gè)點(diǎn)隱藏文章都會(huì)有所收獲，下面我們一起來看看吧。

css實(shí)現(xiàn)三個(gè)點(diǎn)隱藏的方法：1、單行情況下，通過css屬性“text-overflow: ellipsis;”可以實(shí)現(xiàn)將文本溢出顯示為三個(gè)點(diǎn)；2、多行情況下，通過屬性“overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;”即可實(shí)現(xiàn)。

css文字溢出隱藏為三個(gè)點(diǎn)

(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 屬性指定當(dāng)文本溢出包含它的元素時(shí)，應(yīng)該如何顯示。可以設(shè)置溢出后，文本被剪切、顯示省略號(hào) (...) 或顯示自定義字符串（不是所有瀏覽器都支持）。

text-overflow 需要配合以下兩個(gè)屬性使用：

white-space: nowrap;
overflow: hidden;

語(yǔ)法

text-overflow: clip|ellipsis|string|initial|inherit;

值

clip 剪切文本。

ellipsis 顯示省略符號(hào) ... 來代表被修剪的文本。

string 使用給定的字符串來代表被修剪的文本。

initial 設(shè)置為屬性默認(rèn)值。

inherit 從父元素繼承該屬性值。

關(guān)于“css如何實(shí)現(xiàn)三個(gè)點(diǎn)隱藏”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“css如何實(shí)現(xiàn)三個(gè)點(diǎn)隱藏”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。