純CSS實(shí)現(xiàn)“文本溢出截?cái)嗍÷浴钡膸追N方法

小編給大家分享一下純CSS實(shí)現(xiàn)“文本溢出截?cái)嗍÷浴钡膸追N方法，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

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

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

• 兼容性好，對各大主流瀏覽器有好的支持

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

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

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

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

單行文本溢出省略

核心 CSS 語句

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

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

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

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

• 兼容性好，對各大主流瀏覽器有好的支持

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

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

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

短板

• 只支持單行文本截?cái)?，并不支持多?/p>

適用場景

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

Demo

<div class="demo">
      床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光
</div>

.demo {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

效果示例

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

核心 CSS 語句

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

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

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

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

• 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)核的瀏覽器才支持

適用場景

多適用于移動(dòng)端頁面，因?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 語句

• position: relative; （為偽元素絕對定位）

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

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

• 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)

• 兼容性好，對各大主流瀏覽器有好的支持

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

短板

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

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

適用場景

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

Demo

<div class="demo">
      床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光床前明月光
</div>

.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 語句

• 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)

• 兼容性好，對各大主流瀏覽器有好的支持

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

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

短板

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

適用場景

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

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

效果示例

看完了這篇文章，相信你對“純CSS實(shí)現(xiàn)“文本溢出截?cái)嗍÷浴钡膸追N方法”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！