單/多行文本溢出省略

RayKr 發(fā)布于2019-08-30 11:18 / 1172人閱讀

摘要：單行文本溢出省略注一定要給容器定義寬度少了，文字會撐到容器外面少了，文字會被裁切少了，沒有省略號，文字不會隱藏。多行文本溢出省略注，塊元素顯示的文本行數(shù)，可以改成想要的行數(shù)，該屬性規(guī)定子元素應(yīng)該被垂直排列。

單行文本溢出省略：

overflow:hidden;
text-overflow:ellipsis;
white-space:noerap;

注：一定要給容器定義寬度；
少了overflow:hidden，文字會撐到容器外面；
少了text-overflow:ellipsis，文字會被裁切;
少了white-space:noerap，沒有省略號，文字不會隱藏。

2/多行文本溢出省略：

overflow：hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2

注：-webkit-line-clamp:2，塊元素顯示的文本行數(shù)，2可以改成想要的行數(shù)n；
-webkit_box-orient:vertical，該屬性規(guī)定子元素應(yīng)該被垂直排列。

GPU云服務(wù)器云服務(wù)器 php文本溢出省略溢出文本讀取多行文本 html里的多行文本

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114911.html

相關(guān)文章

【前端芝士樹】純CSS實(shí)現(xiàn)多行文本溢出顯示省略號

摘要：前端芝士樹純實(shí)現(xiàn)多行文本溢出顯示省略號使用來控制行數(shù)由于用來限制在一個塊元素顯示的文本的行數(shù)這是一個不規(guī)范的屬性，它沒有出現(xiàn)在規(guī)范草案中，為了實(shí)現(xiàn)該效果，它需要組合其他外來的屬性。【前端芝士樹】純CSS實(shí)現(xiàn)多行文本溢出顯示省略號使用-webkit-line-clamp來控制行數(shù) 由于-webkit-line-clamp 用來限制在一個塊元素顯示的文本的行數(shù),這是一個不規(guī)范的屬性（u...

CNZPH 2019-08-30 15:54 評論0 收藏0
CSS實(shí)現(xiàn)單行、多行文本溢出顯示省略號

摘要：如果實(shí)現(xiàn)單行文本的溢出顯示省略號同學(xué)們應(yīng)該都知道用屬性來，當(dāng)然還需要加寬度屬來兼容部分瀏覽。接下來重點(diǎn)說一說多行文本溢出顯示省略號，如下。如果實(shí)現(xiàn)單行文本的溢出顯示省略號同學(xué)們應(yīng)該都知道用text-overflow:ellipsis屬性來，當(dāng)然還需要加寬度width屬來兼容部分瀏覽。實(shí)現(xiàn)方法： overflow: hidden; text-overflow:ellipsis; whit...

番茄西紅柿 2019-04-23 14:39 評論0 收藏0
多行文本溢出時出現(xiàn)省略號

摘要：多行文本溢出時出現(xiàn)省略號本文推薦種方法。溢出時不顯示溢出的內(nèi)容發(fā)生溢出時使用省略號代替瀏覽器的私有屬性。顯示指定的文本。顯示多少行塊級元素。默認(rèn)顯示的替代文本延遲多長時間后執(zhí)行是否有窗口大小改變時執(zhí)行默認(rèn)操作具有這個類的元素。多行文本溢出時出現(xiàn)省略號本文推薦2種方法。 1. css tip：只兼容chrome內(nèi)核的瀏覽器。ff不支持。 .box { overflow: hi...

王偉廷 2019-08-29 15:43 評論0 收藏0
CSS - 純css實(shí)現(xiàn)多行文本溢出省略（兼容所有瀏覽器）

摘要：前言多行文本超出高度限制出現(xiàn)省略號移動端多為內(nèi)核的有擴(kuò)展屬性但并不是規(guī)范中的屬性端往往要借助去實(shí)現(xiàn)這一效果，但麻煩且不是很靠譜，今天就用純來實(shí)現(xiàn)一個完全兼容的多行省略。前言多行文本超出高度限制出現(xiàn)省略號 , 移動端多為webkit內(nèi)核的 , 有擴(kuò)展屬性-webkit-line-clamp , 但并不是CSS規(guī)范中的屬性 , PC端往往要借助js去實(shí)現(xiàn)這一效果，但麻煩且不是很靠譜，今...

李義 2019-08-29 12:21 評論0 收藏0