成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

CSS單行、多行文本溢出顯示省略號(hào)

PiscesYE / 2332人閱讀

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

單行文本溢出顯示省略號(hào)

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

多行文本溢出顯示省略號(hào)

webkit瀏覽器或移動(dòng)端的頁面

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

完整版寫法如下：

overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2; (兩行文字)
-webkit-box-orient:vertical;
**跨瀏覽器兼容的方案**
比較靠譜簡(jiǎn)單的做法就是設(shè)置相對(duì)定位的容器高度，用包含省略號(hào)（...）的元素模擬實(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)容中加入一個(gè)標(biāo)簽，比如...去模擬；要支持IE8，需要將::after替換為:after

JavaScript解決方案

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

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

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

相關(guān)文章

  • 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...

    番茄西紅柿 評(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...

    wing324 評(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 評(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 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

PiscesYE

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<