亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

CSS單行、多行文本溢出顯示省略號

PiscesYE / 2373人閱讀

摘要：單行文本溢出顯示省略號需要對容器設(shè)置單行高度多行文本溢出顯示省略號瀏覽器或移動端的頁面在瀏覽器或移動端絕大部分是內(nèi)核的瀏覽器可以直接使用的擴(kuò)展屬性是私有屬性注意這是一個不規(guī)范的屬性，它沒有在的規(guī)范草案中用來限制在一個塊元素顯

單行文本溢出顯示省略號

overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
（需要對容器設(shè)置單行高度）

多行文本溢出顯示省略號

webkit瀏覽器或移動端的頁面

   在webkit瀏覽器或移動端（絕大部分是webkit內(nèi)核的瀏覽器）可以直接使用webkit的css擴(kuò)展屬性（webkit是私有屬性）-webkit-line-clamp；
   注意：這是一個不規(guī)范的屬性，它沒有在CSS的規(guī)范草案中
   -webkit-line-clamp用來限制在一個塊元素顯示的文本行數(shù)，為了實現(xiàn)效果，他要與一下webkit屬性結(jié)合使用：
       display:-webkit-box;（必須結(jié)合的屬性，將對象作為彈性伸縮盒子模型展示）
       -webkit-box-orient（必須結(jié)合的屬性，設(shè)置或檢索伸縮盒對象的子元素的排列方式）

完整版寫法如下：

overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2; (兩行文字)
-webkit-box-orient:vertical;
**跨瀏覽器兼容的方案**
比較靠譜簡單的做法就是設(shè)置相對定位的容器高度，用包含省略號（...）的元素模擬實現(xiàn)
p{
position:relative;
line-height:1.4em;
/*設(shè)置容器高度為3倍行高就是顯示3行*/
height:4.2em;
overflow:hidden;
}
p::after{
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 20px 1px 45px;
background:#fff;
}

注意：IE6-7不顯示content內(nèi)容，所以要兼容IE6-7可以是在內(nèi)容中加入一個標(biāo)簽，比如...去模擬；要支持IE8，需要將::after替換為:after

JavaScript解決方案

使用js也可以根據(jù)上面的思路去模擬，實現(xiàn)也很簡單，推薦兩個做類似工作的成熟小工具：
1、clamp.js
2、jQuery插件  jquery.dotdotdot
使用簡單，實現(xiàn)方法自行百度

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

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

相關(guān)文章

  • CSS實現(xiàn)單行、多行文本溢出顯示省略號

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

    番茄西紅柿 評論0 收藏0

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

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

    wing324 評論0 收藏0

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

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

    paulquei 評論0 收藏0

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

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

    maxmin 評論0 收藏0

發(fā)表評論

0條評論

PiscesYE

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<