純 CSS 自定義多行省略：從原理到實現

喆星高照發表於2021-11-08
CSS

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

熱身，單行省略

這是一個全宇宙統一的方案，沒有太多的魔法

/* 原理：設定文字不換行，溢位後隱藏，截斷顯示省略符 */
.ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

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

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

通過 CSS 屬性 -webkit-line-clamp 可以把塊容器中的內容限制為指定的行數

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

屬性的 -webkit 字首告訴我們事情似乎並不簡單。是的，它只支援基於 webkit 核心的瀏覽器，這對於移動端是很友好的，在 安卓 2.3+，IOS 5.0+ 的裝置上你可以直接將上述程式碼直接扔進去沒啥問題，但如果要在 PC 端使用，需要關注下相容性問題，

 

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

 

神奇的 float，浮動

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

 

<div class="box">
  <!-- 文字盒子 -->
  <div class="box__text">騰訊以技術豐富網際網路使用者的生活。通過通訊及社交軟體微信和 QQ 促進使用者聯絡，並助其連線數字內容和生活服務，盡在彈指間。</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>

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

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

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

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

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

 

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

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

 

 

修飾一下，去掉背景色，容器設定溢位隱藏，然後給省略盒子加個文字顏色和漸變，

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

小結一下，這裡其實運用了浮動和 BFC 的原理。

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

浮動的方案的優勢非常明顯，

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

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

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

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

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

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

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

  1. 藉助 line-clamp 預設的省略號，預留自定義省略盒子的位置
  2. 想辦法隱藏預設省略號
  3. 通過定位技術替換預留位置為我們自定義的省略盒子

逐一來看，首先是預留位置，line-clamp 預設省略號的大小受字號 font-size 的影響，所以調整字號就可以控制預留位置的大小。這裡為了保證省略號的大小隻受字型大小的影響，我們可以重置行高和文字間距，

.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; /* 為了方便演示，我們先給省略號一個顏色 */
}

這樣就可以通過只調整文字盒子的字號，來控制預留省略盒子位置的大小了。由於 font-size 會繼承，所以我們再內嵌一個子盒子來重置字號，

<div class="box__text">
    <div class="box__inner">
      騰訊以技術豐富網際網路使用者的生活。通過通訊及社交軟體微信和 QQ 促進使用者聯絡，並助其連線數字內容和生活服務，盡在彈指間。
    </div>
</div>

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

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

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

有了省略號的預留位置後，我們要想辦法將自定義省略盒子定位到預留位置，怎麼辦呢？還是 浮動。由於設定了 -webkit-line-clamp，會導致文字盒子無法撐開完整的高度，為了使用浮動來實現定位，我們可以多渲染一份文案用來撐開高度。

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

<div class="box__abs">
    <div class="box__fake-text">
      騰訊以技術豐富網際網路使用者的生活。通過通訊及社交軟體微信和 QQ 促進使用者聯絡，並助其連線數字內容和生活服務，盡在彈指間。
    </div>
    <div class="box__placeholder"></div>
    <div class="box__more">... 展開</div>
</div>

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

接著用我們前面講的三個浮動盒子實現多行溢位省略的方式，

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

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

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

 

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

相關文章