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

PiscesYE 發布于2019-08-29 12:31 / 2305人閱讀

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

單行文本溢出顯示省略號

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

多行文本溢出顯示省略號

webkit瀏覽器或移動端的頁面

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

完整版寫法如下：

overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2; (兩行文字)
-webkit-box-orient:vertical;

**跨瀏覽器兼容的方案**
比較靠譜簡單的做法就是設置相對定位的容器高度，用包含省略號（...）的元素模擬實現

p{
position:relative;
line-height:1.4em;
/*設置容器高度為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內容，所以要兼容IE6-7可以是在內容中加入一個標簽，比如...去模擬；要支持IE8，需要將::after替換為:after

JavaScript解決方案

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

GPU云服務器云服務器 php文本溢出省略省略號css css省略溢出文本

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111956.html

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

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

番茄西紅柿 2019-04-23 14:39 評論0 收藏0
css實現單行、多行文本超出顯示省略號

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

wing324 2019-08-02 12:05 評論0 收藏0
css實現單行、多行文本超出顯示省略號

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

paulquei 2019-08-29 17:20 評論0 收藏0
css實現單行、多行文本超出顯示省略號

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

maxmin 2019-08-26 13:24 評論0 收藏0