CSS實(shí)現(xiàn)單行、多行文本超出部分顯示省略號(hào)

wangxinarhat 發(fā)布于2019-04-23 11:50 / 3080人閱讀

摘要：單行文本超出，代碼如下代碼效果如下多行文本超出部分顯示省略號(hào)代碼如下效果圖如下注意事項(xiàng)將設(shè)置為的整數(shù)倍，防止超出的文字露出。用來限制在一個(gè)塊元素顯示的文本的行數(shù)。為了實(shí)現(xiàn)該效果，它需要組合其他的屬性。

?單行文本超出，代碼如下： css代碼：

效果如下：

多行文本超出部分顯示省略號(hào)

代碼如下：

<style>
         .more{
            line-height:18px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;       
        }
style>

效果圖如下;

注意事項(xiàng)：

將height設(shè)置為line-height的整數(shù)倍，防止超出的文字露出。
-webkit-line-clamp用來限制在一個(gè)塊元素顯示的文本的行數(shù)。?為了實(shí)現(xiàn)該效果，它需要組合其他的WebKit屬性。常見結(jié)合屬性：
display:?-webkit-box;?必須結(jié)合的屬性?，將對(duì)象作為彈性伸縮盒子模型顯示?。
-webkit-box-orient?必須結(jié)合的屬性?，設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式?。

云服務(wù)器 GPU云服務(wù)器 html超出部分滾動(dòng) 省略號(hào)css 隱藏超出文本 css省略

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

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

相關(guān)文章

css實(shí)現(xiàn)單行、多行文本超出顯示省略號(hào)

摘要：前言項(xiàng)目中我們經(jīng)常遇到這種需求，需要對(duì)單行多行文本超出顯示為省略號(hào)。單行文本省略文本溢出顯示省略號(hào)文本不會(huì)換行語法默認(rèn)值適用于所有元素當(dāng)對(duì)象內(nèi)文本溢出時(shí)不顯示省略標(biāo)記，而是將溢出的部分裁切掉。前言：項(xiàng)目中我們經(jīng)常遇到這種需求，需要對(duì)單行、多行文本超出顯示為省略號(hào)。這篇文章主要總結(jié)了小編解決此問題的方法，有不足之處歡迎大家指正。單行文本省略 showImg(https://segme...

wing324 2019-08-02 12:05 評(píng)論0 收藏0
css實(shí)現(xiàn)單行、多行文本超出顯示省略號(hào)

摘要：前言項(xiàng)目中我們經(jīng)常遇到這種需求，需要對(duì)單行多行文本超出顯示為省略號(hào)。單行文本省略文本溢出顯示省略號(hào)文本不會(huì)換行語法默認(rèn)值適用于所有元素當(dāng)對(duì)象內(nèi)文本溢出時(shí)不顯示省略標(biāo)記，而是將溢出的部分裁切掉。前言：項(xiàng)目中我們經(jīng)常遇到這種需求，需要對(duì)單行、多行文本超出顯示為省略號(hào)。這篇文章主要總結(jié)了小編解決此問題的方法，有不足之處歡迎大家指正。單行文本省略 showImg(https://segme...

paulquei 2019-08-29 17:20 評(píng)論0 收藏0
css實(shí)現(xiàn)單行、多行文本超出顯示省略號(hào)

摘要：前言項(xiàng)目中我們經(jīng)常遇到這種需求，需要對(duì)單行多行文本超出顯示為省略號(hào)。單行文本省略文本溢出顯示省略號(hào)文本不會(huì)換行語法默認(rèn)值適用于所有元素當(dāng)對(duì)象內(nèi)文本溢出時(shí)不顯示省略標(biāo)記，而是將溢出的部分裁切掉。前言：項(xiàng)目中我們經(jīng)常遇到這種需求，需要對(duì)單行、多行文本超出顯示為省略號(hào)。這篇文章主要總結(jié)了小編解決此問題的方法，有不足之處歡迎大家指正。單行文本省略 showImg(https://segme...

maxmin 2019-08-26 13:24 評(píng)論0 收藏0
CSS實(shí)現(xiàn)單行、多行文本溢出顯示省略號(hào)

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

番茄西紅柿 2019-04-23 14:39 評(píng)論0 收藏0