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

BDEEFE 發(fā)布于2019-08-22 18:19 / 2426人閱讀

摘要：一單行文本溢出前提要設(shè)置寬度超出隱藏省略號(hào)不換行二多行文本溢出方法一利用定位實(shí)現(xiàn)。該方法適用范圍廣，但文字未超出行的情況下也會(huì)出現(xiàn)省略號(hào)可結(jié)合優(yōu)化該方法。設(shè)置顯示獲取字符串的字?jǐn)?shù)截取字符串多余的用省略號(hào)顯示參考文章鏈接

一、單行文本溢出

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

二、多行文本溢出

方法一：利用定位實(shí)現(xiàn)。該方法適用范圍廣，但文字未超出行的情況下也會(huì)出現(xiàn)省略號(hào),可結(jié)合js優(yōu)化該方法。

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;
}

需要注意的幾點(diǎn)：

利用height和line-height的倍數(shù)關(guān)系調(diào)整需要顯示的行數(shù)，防止超出的文字露出。

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

IE6-7不顯示content內(nèi)容，所以要兼容IE6-7可以是在內(nèi)容中加入一個(gè)標(biāo)簽，比如用...去模擬；

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

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

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

需要注意：

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

-webkit-line-clamp; 用來(lái)限制在一個(gè)塊元素顯示的文本的行數(shù)。

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

方法三：使用JavaScript。

$(".class").each(function(){
  //設(shè)置顯示獲取字符串的字?jǐn)?shù)
  var maxwidth=280;   
  if($(this).text().length>maxwidth){
     //截取字符串
     $(this).text($(this).text().substring(0,maxwidth));
     //多余的用省略號(hào)顯示
     $(this).html($(this).html()+"...");
   }
});

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

GPU云服務(wù)器云服務(wù)器 php文本溢出省略溢出文本 html省略顯示文本顯示

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

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

相關(guān)文章

【效果實(shí)現(xiàn)】在照片上面顯示一段文字，最多兩行，多余部分用省略號(hào)表示

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

PascalXie 2019-08-02 15:32 評(píng)論0 收藏0
【效果實(shí)現(xiàn)】在照片上面顯示一段文字，最多兩行，多余部分用省略號(hào)表示

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

alaege 2019-08-30 11:22 評(píng)論0 收藏0
前端面試題-文本溢出顯示省略號(hào)（...）

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

AprilJ 2019-08-30 14:08 評(píng)論0 收藏0
前端面試題-文本溢出顯示省略號(hào)（...）

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

Donald 2019-08-22 15:20 評(píng)論0 收藏0
前端面試題-文本溢出顯示省略號(hào)（...）

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

CHENGKANG 2019-08-01 18:41 評(píng)論0 收藏0