在我們的日常開發(fā)工作中，文本溢出截?cái)嗍÷允呛艹Ｒ姷囊环N需考慮的業(yè)務(wù)場(chǎng)景細(xì)節(jié)。看上去 “稀松平常” ，但在實(shí)現(xiàn)上卻有不同的區(qū)分，是單行截?cái)噙€是多行截?cái)啵慷嘈械慕財(cái)嗯袛嗍腔谛袛?shù)還是基于高度？這些問(wèn)題之下，都有哪些實(shí)現(xiàn)方案？他們之間的差異性和場(chǎng)景適應(yīng)性又是如何？



一般來(lái)說(shuō)，在做這樣文字截?cái)嘈Ч麜r(shí)我們更多是希望：



兼容性好，對(duì)各大主流瀏覽器有好的支持

響應(yīng)式截?cái)啵鶕?jù)不同寬度做出調(diào)整

文本超出范圍才顯示省略號(hào)，否則不顯示省略號(hào)

省略號(hào)位置顯示剛好

基于上述的準(zhǔn)則，下面我們通過(guò)編碼實(shí)踐，給出一些答案。



單行文本溢出省略

核心 CSS 語(yǔ)句



overflow: hidden；（文字長(zhǎng)度超出限定寬度，則隱藏超出的內(nèi)容）

white-space: nowrap；（設(shè)置文字在一行顯示，不能換行）

text-overflow: ellipsis；（規(guī)定當(dāng)文本溢出時(shí)，顯示省略符號(hào)來(lái)代表被修剪的文本）

優(yōu)點(diǎn)



兼容性好，對(duì)各大主流瀏覽器有好的支持

響應(yīng)式截?cái)啵鶕?jù)不同寬度做出調(diào)整

文本溢出范圍才顯示省略號(hào)，否則不顯示省略號(hào)

省略號(hào)位置顯示剛好

短板



只支持單行文本截?cái)啵⒉恢С侄嘈?br />
適用場(chǎng)景



適用于單行文本溢出顯示省略號(hào)的情況

Demo



<div class="demo">

      床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光

</div>



.demo {

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}







多行文本溢出省略（-webkit-line-clamp）

核心 CSS 語(yǔ)句



overflow: hidden；（文本溢出限定的寬度就隱藏內(nèi)容）

-webkit-line-clamp: 2；（用來(lái)限制在一個(gè)塊元素顯示的文本的行數(shù), 2 表示最多顯示 2 行。 為了實(shí)現(xiàn)該效果，它需要組合其他的WebKit屬性）

display: -webkit-box；（和 -webkit-line-clamp: 2；結(jié)合使用，將對(duì)象作為彈性伸縮盒子模型顯示 ）

-webkit-box-orient: vertical；（和 -webkit-line-clamp: 2；結(jié)合使用 ，設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式 ）

text-overflow: ellipsis；（多行文本的情況下，用省略號(hào)“…”隱藏溢出范圍的文本)

優(yōu)點(diǎn)



響應(yīng)式截?cái)啵鶕?jù)不同寬度做出調(diào)整

文本溢出范圍才顯示省略號(hào)，否則不顯示省略號(hào)

瀏覽器原生實(shí)現(xiàn)，所以省略號(hào)位置顯示剛好

短板



兼容性一般： -webkit-line-clamp 屬性只有 WebKit 內(nèi)核的瀏覽器才支持





適用場(chǎng)景



多適用于移動(dòng)端頁(yè)面，因?yàn)橐苿?dòng)設(shè)備瀏覽器更多是基于 WebKit 內(nèi)核

Demo



<div class="demo">

      床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光

</div>



.demo {

  display: -webkit-box;

  overflow: hidden;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

}









多行文本溢出省略（偽元素 + 定位）

核心 CSS 語(yǔ)句



position: relative; （為偽元素絕對(duì)定位）

overflow: hidden; （文本溢出限定的寬度就隱藏內(nèi)容）

position: absolute;（給省略號(hào)絕對(duì)定位）

line-height: 18px; （結(jié)合元素高度,高度固定的情況下,設(shè)定行高, 控制顯示行數(shù)）

height: 36px; （設(shè)定當(dāng)前元素高度）

::after {} （設(shè)置省略號(hào)樣式）

word-break: break-all; （如果文本中有英文，可以使一個(gè)單詞能夠在換行時(shí)進(jìn)行拆分）

優(yōu)點(diǎn)



兼容性好，對(duì)各大主流瀏覽器有好的支持

響應(yīng)式截?cái)啵鶕?jù)不同寬度做出調(diào)整

短板



無(wú)法識(shí)別文字的長(zhǎng)短，無(wú)論文本是否溢出范圍，一直顯示省略號(hào)

省略號(hào)顯示可能不會(huì)剛剛好，有時(shí)會(huì)遮住一半文字，跟文字沒有貼合的很緊密

適用場(chǎng)景



文字內(nèi)容較多，確定文字內(nèi)容一定會(huì)超過(guò)容器的

Demo



<div class="demo">

      床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光

</div>

1

2

3

.demo {

    position: relative;

    line-height: 18px;

    height: 36px;

    overflow: hidden;

    word-break: break-all;

}

.demo::after {

    content:"...";

    font-weight:bold;

    position:absolute;

    bottom:0;

    right:0;

    padding:0 20px 1px 45px;

    

    / 為了展示效果更好 /

    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));

    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);

    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);

    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);

    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);

}



多行文本溢出省略（Float）

核心 CSS 語(yǔ)句



line-height: 20px；（結(jié)合元素高度,高度固定的情況下,設(shè)定行高, 控制顯示行數(shù)）

overflow: hidden；（文本溢出限定的寬度就隱藏內(nèi)容）

float: right/left；（利用元素浮動(dòng)的特性實(shí)現(xiàn)）

position: relative；（根據(jù)自身位置移動(dòng)省略號(hào)位置, 實(shí)現(xiàn)文本溢出顯示省略號(hào)效果）

word-break: break-all；（如果文本中有英文，可以使一個(gè)單詞能夠在換行時(shí)進(jìn)行拆分）

優(yōu)點(diǎn)



兼容性好，對(duì)各大主流瀏覽器有好的支持

響應(yīng)式截?cái)啵鶕?jù)不同寬度做出調(diào)整

文本溢出范圍才顯示省略號(hào)，否則不顯示省略號(hào)

短板



省略號(hào)顯示可能不會(huì)剛剛好，有時(shí)會(huì)遮住一半文字，跟文字沒有貼合的很緊密

適用場(chǎng)景



文字內(nèi)容較多，確定文字內(nèi)容一定會(huì)超過(guò)容器的

Demo



<div class="demo">

      <div class="text">

        床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光

      </div>

</div>



.demo {

  height: 40px;

  line-height: 20px;

  overflow: hidden;

}

.demo .text {

  float: right;

  margin-left: -5px;

  width: 100%;

  word-break: break-all;

}

.demo::before {

  float: left;

  width: 5px;

  content: "";

  height: 40px;

}

.demo::after {

  float: right;

  content: "...";

  height: 20px;

  line-height: 20px;

  padding-right: 5px;

  text-align: right;

  width: 3em;

  margin-left: -3em;

  position: relative;

  left: 100%;

  top: -20px;

  padding-right: 5px;

    

  / 為了展示效果更好 /

  background: -webkit-gradient(

    linear,

    left top,

    right top,

    from(rgba(255, 255, 255, 0)),

    to(white),

    color-stop(50%, white)

  );

  background: -moz-linear-gradient(

    to right,

    rgba(255, 255, 255, 0),

    white 50%,

    white

  );

  background: -o-linear-gradient(

    to right,

    rgba(255, 255, 255, 0),

    white 50%,

    white

  );

  background: -ms-linear-gradient(

    to right,

    rgba(255, 255, 255, 0),

    white 50%,

    white

  );

  background: linear-gradient(

    to right,

    rgba(255, 255, 255, 0),

    white 50%,

    white

  );

}