文本溢出顯示省略號

BDEEFE 發布于2019-08-22 18:19 / 2432人閱讀

摘要：一單行文本溢出前提要設置寬度超出隱藏省略號不換行二多行文本溢出方法一利用定位實現。該方法適用范圍廣，但文字未超出行的情況下也會出現省略號可結合優化該方法。設置顯示獲取字符串的字數截取字符串多余的用省略號顯示參考文章鏈接

一、單行文本溢出

width: 300px;/*前提要設置寬度*/
overflow: hidden;/*超出隱藏*/
text-overflow: ellipsis;/*省略號*/
white-space: nowrap;/*不換行*/

二、多行文本溢出

方法一：利用定位實現。該方法適用范圍廣，但文字未超出行的情況下也會出現省略號,可結合js優化該方法。

p {
    width: 300px;/*可選*/
    position: relative;
    line-height: 20px;
    height: 60px;/*顯示3行*/
    overflow: hidden;
    padding: 2px 10px;
}
p::after {
    content:"...";
    position:absolute;
    bottom:0;
    right:0;
}

需要注意的幾點：

利用height和line-height的倍數關系調整需要顯示的行數，防止超出的文字露出。

給p::after添加漸變背景可避免文字只顯示一半。

IE6-7不顯示content內容，所以要兼容IE6-7可以是在內容中加入一個標簽，比如用...去模擬；

要支持IE8，需要將::after替換成:after。

方法二：利用WebKit的CSS擴展屬性，該方法適用于WebKit瀏覽器及移動端。

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;

需要注意：

display: -webkit-box; 將對象作為彈性伸縮盒子模型顯示。

-webkit-line-clamp; 用來限制在一個塊元素顯示的文本的行數。

-webkit-box-orient; 設置或檢索伸縮盒對象的子元素的排列方式。

方法三：使用JavaScript。

$(".class").each(function(){
  //設置顯示獲取字符串的字數
  var maxwidth=280;   
  if($(this).text().length>maxwidth){
     //截取字符串
     $(this).text($(this).text().substring(0,maxwidth));
     //多余的用省略號顯示
     $(this).html($(this).html()+"...");
   }
});

參考文章鏈接:http://caibaojian.com/multili...

云服務器 GPU云服務器 php文本溢出省略溢出文本 html省略顯示文本顯示

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

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

【效果實現】在照片上面顯示一段文字，最多兩行，多余部分用省略號表示

摘要：思路照片上面顯示文字，怎么實現呢將照片作為的背景呀效果圖多行文本溢出顯示我是一段很長的文字我是一段很長的文字我是一段很長的文字我是一段很長的文字我是一段很長的文字我是一段很長的文字我是一段很長的文字我是一段很長的文字單行文本溢出思路：照片上面顯示文字，怎么實現呢？將照片作為div的背景呀！效果圖： showImg(https://segmentfault.com/img/bVbuV...

PascalXie 2019-08-02 15:32 評論0 收藏0
【效果實現】在照片上面顯示一段文字，最多兩行，多余部分用省略號表示

摘要：思路照片上面顯示文字，怎么實現呢將照片作為的背景呀效果圖多行文本溢出顯示我是一段很長的文字我是一段很長的文字我是一段很長的文字我是一段很長的文字我是一段很長的文字我是一段很長的文字我是一段很長的文字我是一段很長的文字單行文本溢出思路：照片上面顯示文字，怎么實現呢？將照片作為div的背景呀！效果圖： showImg(https://segmentfault.com/img/bVbuV...

alaege 2019-08-30 11:22 評論0 收藏0
前端面試題-文本溢出顯示省略號（...）

摘要：當文本溢出包含元素時，顯示省略符號來代表被修剪的文本。文本不會換行，文本會在在同一行上繼續，直到遇到標簽為止。說明限制在一個塊元素顯示的文本的行數。將對象作為彈性伸縮盒子模型顯示。，在多行文本的情況下，用省略號隱藏超出范圍的文本。一、文本溢出隱藏如下圖所示，我們需要對溢出文本進行...顯示的操作，單行多行的情況都有（具體幾行得看設計的心情） showImg(https://segm...

AprilJ 2019-08-30 14:08 評論0 收藏0
前端面試題-文本溢出顯示省略號（...）

摘要：當文本溢出包含元素時，顯示省略符號來代表被修剪的文本。文本不會換行，文本會在在同一行上繼續，直到遇到標簽為止。說明限制在一個塊元素顯示的文本的行數。將對象作為彈性伸縮盒子模型顯示。，在多行文本的情況下，用省略號隱藏超出范圍的文本。一、文本溢出隱藏如下圖所示，我們需要對溢出文本進行...顯示的操作，單行多行的情況都有（具體幾行得看設計的心情） showImg(https://segm...

Donald 2019-08-22 15:20 評論0 收藏0
前端面試題-文本溢出顯示省略號（...）

摘要：當文本溢出包含元素時，顯示省略符號來代表被修剪的文本。文本不會換行，文本會在在同一行上繼續，直到遇到標簽為止。說明限制在一個塊元素顯示的文本的行數。將對象作為彈性伸縮盒子模型顯示。，在多行文本的情況下，用省略號隱藏超出范圍的文本。一、文本溢出隱藏如下圖所示，我們需要對溢出文本進行...顯示的操作，單行多行的情況都有（具體幾行得看設計的心情） showImg(https://segm...

CHENGKANG 2019-08-01 18:41 評論0 收藏0