文字溢出怎么展示，你的需求是什么？單行還是多行？截斷，省略，自定義樣式，自適應(yīng)高度？在這里你都能找到答案。接下來我會由淺入深，從原理到實現(xiàn)，帶你一步步揭開多行省略的面紗。我們先從最簡單的單行溢出省略開始，

熱身，單行省略

這是一個全宇宙統(tǒng)一的方案，沒有太多的魔法

/* 原理：設(shè)置文字不換行，溢出后隱藏，截斷顯示省略符 */
.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

如何實現(xiàn)多行省略呢？先從最簡單的line-clamp開始吧。

最簡單的多行省略，line-clamp

通過 CSS 屬性-webkit-line-clamp可以把塊容器中的內(nèi)容限制為指定的行數(shù)

.ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

屬性的-webkit前綴告訴我們事情似乎并不簡單。是的，它只支持基于webkit內(nèi)核的瀏覽器，這對于移動端是很友好的，在安卓 2.3+，IOS 5.0+的設(shè)備上你可以直接將上述代碼直接扔進去沒啥問題，但如果要在PC端使用，需要關(guān)注下兼容性問題，

除了 PC 兼容性問題，line-clamp的方案也不支持自定義省略樣式，如果需要在省略符后面加文字，箭頭等自定義樣式，我們可能就得考慮其他方案了，比如：浮動。

神奇的 float，浮動

什么！浮動也能實現(xiàn)多行省略？是的，下面我們用三個浮動盒子來模擬多行省略。首先準備三個盒子（文字盒，占位盒，自定義樣式的省略盒）向右浮動，為了方便理解原理，我們給盒子增加不同的背景色，

<div class="box">
  <!-- 文字盒子 -->
  <div class="box__text">騰訊以技術(shù)豐富互聯(lián)網(wǎng)用戶的生活。通過通信及社交軟件微信和 QQ 促進用戶聯(lián)系，并助其連接數(shù)字內(nèi)容和生活服務(wù)，盡在彈指間。</div>
  <!-- 占位盒子 -->
  <div class="box__placeholder"></div>
  <!-- 自定義省略盒子 -->
  <div class="box__more">...展開</div>
</div>

<style>
  .box__text {
    width: 100%;
    height: 60px;
    line-height: 20px;
    background-color: pink;
    float: right;
  }

  .box__placeholder {
    width: 60px;
    height: 60px;
    background-color: gray;
    opacity: 0.8;
    float: right;
  }

  .box__more {
    width: 60px;
    text-align: right;
    background: yellow;
    float: right;
  }
</style>

接下來開始調(diào)整位置，先給文字盒一個負的左外邊距，它的值剛好為占位盒的寬度，

.box__text {
  margin-left: -60px;
}

這樣一來就給了占位盒子空間，它會浮動到左邊，和文字盒排在一排，

上圖中，文字盒的高度小于占位盒高度，此時第一排高度為占位盒子高度，第一排沒有多余空間，我們自定義的省略盒子只能排在第二排。試想一下，當文字盒的高度大于占位盒高度時（比如文字顯示 4 行），會發(fā)生什么？

第一排的高度會被文字盒撐開，這個時候第一排有了多余空間，省略盒子能夠擠進去。

Awesome 😊，接下來只需要把省略盒子定位到右邊和占位盒子同排的位置就可以了，

.box__more {
  position: relative;
  left: 100%;
  transform: translate(-100%, -100%);
}

修飾一下，去掉背景色，容器設(shè)置溢出隱藏，然后給省略盒子加個文字顏色和漸變，

.box {
  position: relative;
  overflow: hidden;
}

.box__more {
  color: #1890ff;
  background-image: linear-gradient(to left, white 40%, rgba(255, 255, 255, 0.8) 70%, transparent 100%);
}

小結(jié)一下，這里其實運用了浮動和 BFC 的原理。

外層盒子通過overflow: hidden創(chuàng)建一個 BFC，浮動盒子的區(qū)域不會和 BFC 重疊，計算 BFC 高度時，浮動元素也會參與計算，浮動盒會浮動到當前行的開頭或結(jié)尾，再借助一些定位技術(shù)，就可以模擬多行省略的效果了。

浮動的方案的優(yōu)勢非常明顯，

• 兼容性強，支持所有主流的 PC，移動端瀏覽器
• 支持自定義帶漸變的文字省略樣式

由于省略樣式區(qū)域本質(zhì)上是一個浮動盒子，所以這里我們需要通過漸變來防止穿幫，對于某些背景顏色比較復(fù)雜的區(qū)域，或者更強的一些自定義省略樣式需求時（比如省略樣式定義為一張箭頭或圖片等），這種方案開始顯得力不從心了。

有沒有其他方式可以實現(xiàn)省略樣式完全的自定義呢？

有，將自定義省略盒子的位置預(yù)留出來。

那要怎么預(yù)留呢？我們可以借助line-clamp。由line-clamp截斷后的省略號...剛好可以幫助我們進行占位，如果我們能通過某種辦法將默認的省略號隱藏掉，再替換為我們自定義的浮動盒子，是不是就可以了！這也就是接下來我們要介紹的方案。

完全自定義，浮動 + line-clamp

我們重新整理一下上述的思路，關(guān)鍵的點有三個，

借助line-clamp默認的省略號，預(yù)留自定義省略盒子的位置想辦法隱藏默認省略號通過定位技術(shù)替換預(yù)留位置為我們自定義的省略盒子

逐一來看，首先是預(yù)留位置，line-clamp默認省略號的大小受字號font-size的影響，所以調(diào)整字號就可以控制預(yù)留位置的大小。這里為了保證省略號的大小只受字體大小的影響，我們可以重置行高和文字間距，

.box__text {
  position: relative;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: 60px;
  line-height: 0;
  letter-spacing: 0; /* 重置了行高和文字間距，保證省略號占位只受字體大小的影響 */
  color: red; /* 為了方便演示，我們先給省略號一個顏色 */
}

這樣就可以通過只調(diào)整文字盒子的字號，來控制預(yù)留省略盒子位置的大小了。由于font-size會繼承，所以我們再內(nèi)嵌一個子盒子來重置字號，

<div class="box__text">
    <div class="box__inner">
      騰訊以技術(shù)豐富互聯(lián)網(wǎng)用戶的生活。通過通信及社交軟件微信和 QQ 促進用戶聯(lián)系，并助其連接數(shù)字內(nèi)容和生活服務(wù)，盡在彈指間。
    </div>
</div>

<style>
  .box__inner {
    font-size: 16px;
    line-height: 20px;
    color: #000;
    vertical-align: top;
    display: inline;
  }
</style>

接下來是想辦法隱藏省略號，這個比較簡單，可以設(shè)置透明度或者顏色透明，

.box__text {
  opacity: 0;
  color: transparent;
}

有了省略號的預(yù)留位置后，我們要想辦法將自定義省略盒子定位到預(yù)留位置，怎么辦呢？還是浮動。由于設(shè)置了-webkit-line-clamp，會導(dǎo)致文字盒子無法撐開完整的高度，為了使用浮動來實現(xiàn)定位，我們可以多渲染一份文案用來撐開高度。

準備一個絕對定位的盒子，作為渲染撐開高度文案的容器，

<div class="box__abs">
    <div class="box__fake-text">
      騰訊以技術(shù)豐富互聯(lián)網(wǎng)用戶的生活。通過通信及社交軟件微信和 QQ 促進用戶聯(lián)系，并助其連接數(shù)字內(nèi)容和生活服務(wù)，盡在彈指間。
    </div>
    <div class="box__placeholder"></div>
    <div class="box__more">... 展開</div>
</div>

<style>
  .box__abs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
</style>

接著用我們前面講的三個浮動盒子實現(xiàn)多行溢出省略的方式，

.box__fake-text {
  width: 100%;
  margin-left: -60px;
  line-height: 20px;
  float: right;
  color: transparent; /* 文案是為了撐開高度，配合浮動實現(xiàn)多行溢出省略 */
}

.box__placeholder {
  width: 60px;
  height: 60px;
  float: right;
}

.box__more {
  position: relative;
  left: 100%;
  transform: translate(-100%, -100%);
  width: 60px;
  text-align: right;
  color: #1890ff;
  float: right;
}

需要注意的是，這里的文字盒子是為了撐開高度，不需要展示，所以我們設(shè)置了顏色透明。好了，最后一步，去掉背景色，外層盒子設(shè)置溢出隱藏就是我們的最終效果，

line-clamp+ 浮動的方式可以實現(xiàn)省略符完全自定義，我們重置了行高和文字間距，只需要調(diào)整外層盒子的字體大小font-size就可以控制自定義省略盒子的寬度，你可以將省略盒子替換為任意的箭頭，圖片，折角或文字，這下再也不用擔心 UI 小姐姐提需求了 ):

到此這篇關(guān)于純 CSS 自定義多行省略的問題(從原理到實現(xiàn))的文章就介紹到這了,更多相關(guān)CSS 自定義多行省略內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評論