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

熱身，單行省略

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

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

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

最簡(jiǎn)單的多行省略，line-clamp

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

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

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

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

神奇的 float，浮動(dòng)

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

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

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

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

這樣一來(lái)就給了占位盒子空間，它會(huì)浮動(dòng)到左邊，和文字盒排在一排，

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

第一排的高度會(huì)被文字盒撐開(kāi)，這個(gè)時(shí)候第一排有了多余空間，省略盒子能夠擠進(jìn)去。

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

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

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

.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é)一下，這里其實(shí)運(yùn)用了浮動(dòng)和 BFC 的原理。

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

浮動(dòng)的方案的優(yōu)勢(shì)非常明顯，

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

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

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

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

那要怎么預(yù)留呢？我們可以借助line-clamp。由line-clamp截?cái)嗪蟮氖÷蕴?hào)...剛好可以幫助我們進(jìn)行占位，如果我們能通過(guò)某種辦法將默認(rèn)的省略號(hào)隱藏掉，再替換為我們自定義的浮動(dòng)盒子，是不是就可以了！這也就是接下來(lái)我們要介紹的方案。

完全自定義，浮動(dòng) + line-clamp

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

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

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

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

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

<div class="box__text">
    <div class="box__inner">
      騰訊以技術(shù)豐富互聯(lián)網(wǎng)用戶的生活。通過(guò)通信及社交軟件微信和 QQ 促進(jìn)用戶聯(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>

接下來(lái)是想辦法隱藏省略號(hào)，這個(gè)比較簡(jiǎn)單，可以設(shè)置透明度或者顏色透明，

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

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

準(zhǔn)備一個(gè)絕對(duì)定位的盒子，作為渲染撐開(kāi)高度文案的容器，

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

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

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

.box__fake-text {
  width: 100%;
  margin-left: -60px;
  line-height: 20px;
  float: right;
  color: transparent; /* 文案是為了撐開(kāi)高度，配合浮動(dòng)實(shí)現(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;
}

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

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

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

最新評(píng)論