這里要說的是文本超出多行才隱藏文字并且顯示省略號而不是超出一行就省略。
首先大家要了解一些基本的文本文字屬性的設(shè)定，例如white-space(超出是否換行)，letter-spacing（字間距），text-overflow（文字超出如何顯示），word-wrap（允許長單詞或 URL 地址換行到下一行），overflow（超出塊范圍如何 顯示）等等...
（1）首先看一下超出一行就隱藏并顯示省略的代碼：
width: 100px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
都是先規(guī)定文本寬度width（或者max-width），然候超出要hidden隱藏，nowarp是不換行屬性，ellipsis表示省略號。
（2）對于指定多行文本，超出預(yù)期的行數(shù)再顯示省略號的話，我也百度一下，方案如下：
給標簽設(shè)定屬性,例如span吧:
span{position: relative; max-height: 40px;overflow: hidden;white-space: normal}
span::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}
上述顯示兩行，超出顯示省略號。先聲明行高20px，規(guī)定最大高度40px（就是顯示剛好兩行嘍），after中的設(shè)定是在span這一塊最后加一個content，內(nèi)容是“...”，這種是兼容的辦法，不過顯示起來會稍稍有點丑。
（3）由于最近在寫手機端，涉及到文本超出兩行顯示省略號，于是乎，一種方法誕生了，直接上代碼：
span{
display: block;
font-family: PingFangSC-Regular;
font-size: 14px;
color: #482929;
letter-spacing: 0;
line-height: 20px;
overflow:hidden;
text-overflow:ellipsis;
white-space: normal;
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;/規(guī)定最多顯示兩行/
}
注：這個方法適用webkit核瀏覽器和手機端，效果如下圖：
作者：YinghaoGuo
來源：CSDN
原文：https://blog.csdn.net/qq_22855325/article/details/59488692
版權(quán)聲明：本文為博主原創(chuàng)文章，轉(zhuǎn)載請附上博文鏈接！
