多余文字省略解決方案

joy968 發(fā)布于2019-08-30 15:52 / 1578人閱讀

摘要：本文將討論單行和多行文字省略的方案，特別是多行文字的省略，不像單行省略的解決方案那么簡單全面，故本文重點討論多行文字的方案。則不顯示超出容器的文字內容，若無此屬性，文字會顯示超過容器而不省略。總結本文介紹的多余文字省略方案，都是較為常用的。

網頁前端開發(fā)過程中，后端傳來的文本數(shù)據長短不可控，如果接收到的文本非常長且又沒有作自適應處理，頁面效果會十分可怕。自適應處理在這種場景下確實很重要，不過，另一種解決方案同樣也可以考慮，那就是本文將要討論的省略多余文字，尤其是在移動端屏幕資源有限的情況下，更應該采用省略文字的解決方案。
本文將討論單行和多行文字省略的方案，特別是多行文字的省略，不像單行省略的解決方案那么簡單全面，故本文重點討論多行文字的方案。

單行文字省略

單行文字的省略方案已經有比較主流又有效的解決方案，就是CSS3的text-overflow屬性。該屬性能夠優(yōu)雅地完成所有單行文字省略的需求，而且覆蓋了目前市場上幾乎所有的瀏覽器版本（瀏覽器支持情況，請參考：http://caniuse.com/#search=te... ）。
在使用中唯一需要注意的是要加上代碼：

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

white-space: nowrap 保證單行文字不會換行，若無此屬性文字會自動換行而不會顯示省略號。overflow: hidden 則不顯示超出容器的文字內容，若無此屬性，文字會顯示超過容器而不省略。

多行文字省略 方案一：-webkit-line-clamp（僅適用于webkit內核瀏覽器）

在webkit內核的瀏覽器中，多行文字省略可以采用CSS屬性-webkit-line-clamp實現(xiàn)。

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

其中overflow:hidden 保證超出行數(shù)的內容不顯示；display: -webkit-box與-webkit-box-orient: vertical 表示采用-webkit-box顯示，其行數(shù)方向為垂直。
這種方法實現(xiàn)起來簡單明了，缺點就是受用面太窄，只適用于webkit內核瀏覽器。而且，-webkit-box已經被flex替代，后續(xù)不太可能被其他內核瀏覽器支持。不過，由于大部分移動端瀏覽器（Safari, Android Browser, Chrome）都是webkit內核的，如果該頁面僅在移動端瀏覽，那么這不失為一種最簡單有效的方案。

方案二：clamp.js

CSS搞不定的事情，只能交給JS了。
解決方案代碼，請參考這個倉庫~ https://github.com/yuanqing/l...

基本思路

先按單詞截斷，再按字符進行截斷。單詞與字符的截斷方法類似，以截斷字符的思路為例：

每次循環(huán)減少element.innerHTML一個字符；

觀察此時的element元素內容的高度是否滿足要求的最大高度；

其中元素內容的高度用element.offsetHeight獲取；

獲取要求的最大高度：由于傳入的是最大行數(shù)，故而將其與line-height相乘得到（line-height可以由計算樣式獲得window.getComputedStyle(element).lineHeight）；

function truncateByCharacter(element, maximumHeight, ellipsisCharacter) {
  const innerHTML = element.innerHTML;
  let length = innerHTML.length;

  while (length > 0) {
      element.innerHTML = innerHTML.substring(0, length).replace(TRAILING_WHITESPACE_REGEX, "") + ellipsisCharacter;
    if (element.offsetHeight <= maximumHeight) {
      return;
    }
    length--;
  }
}

JS的解決方案相比CSS的更加靈活，如需要隱藏或顯示更多文字信息時，則應該采用clamp.js解決方案。

總結

本文介紹的多余文字省略方案，都是較為常用的。單行文字解決方案中的text-overflow已經足以應對各種場景各種瀏覽器；而多行省略文字的解決方案較簡單的可采用-webkit-line-clamp方法，尤其是移動端，若存在兼容性問題則參考clamp.js用JS來解決。

GPU云服務器云服務器 js文字省略號 html5省略文字多余多余逗號

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/116491.html

多余文字省略解決方案

摘要：本文將討論單行和多行文字省略的方案，特別是多行文字的省略，不像單行省略的解決方案那么簡單全面，故本文重點討論多行文字的方案。則不顯示超出容器的文字內容，若無此屬性，文字會顯示超過容器而不省略。總結本文介紹的多余文字省略方案，都是較為常用的。網頁前端開發(fā)過程中，后端傳來的文本數(shù)據長短不可控，如果接收到的文本非常長且又沒有作自適應處理，頁面效果會十分可怕。自適應處理在這種場景下確實很重要...

ThinkSNS 2019-08-20 14:24 評論0 收藏0
多余文字省略解決方案

摘要：本文將討論單行和多行文字省略的方案，特別是多行文字的省略，不像單行省略的解決方案那么簡單全面，故本文重點討論多行文字的方案。則不顯示超出容器的文字內容，若無此屬性，文字會顯示超過容器而不省略。總結本文介紹的多余文字省略方案，都是較為常用的。網頁前端開發(fā)過程中，后端傳來的文本數(shù)據長短不可控，如果接收到的文本非常長且又沒有作自適應處理，頁面效果會十分可怕。自適應處理在這種場景下確實很重要...

zqhxuyuan 2019-08-01 16:21 評論0 收藏0
【效果實現(xiàn)】在照片上面顯示一段文字，最多兩行，多余部分用省略號表示

摘要：思路照片上面顯示文字，怎么實現(xiàn)呢將照片作為的背景呀效果圖多行文本溢出顯示我是一段很長的文字我是一段很長的文字我是一段很長的文字我是一段很長的文字我是一段很長的文字我是一段很長的文字我是一段很長的文字我是一段很長的文字單行文本溢出思路：照片上面顯示文字，怎么實現(xiàn)呢？將照片作為div的背景呀！效果圖： showImg(https://segmentfault.com/img/bVbuV...

PascalXie 2019-08-02 15:32 評論0 收藏0
【效果實現(xiàn)】在照片上面顯示一段文字，最多兩行，多余部分用省略號表示

摘要：思路照片上面顯示文字，怎么實現(xiàn)呢將照片作為的背景呀效果圖多行文本溢出顯示我是一段很長的文字我是一段很長的文字我是一段很長的文字我是一段很長的文字我是一段很長的文字我是一段很長的文字我是一段很長的文字我是一段很長的文字單行文本溢出思路：照片上面顯示文字，怎么實現(xiàn)呢？將照片作為div的背景呀！效果圖： showImg(https://segmentfault.com/img/bVbuV...

alaege 2019-08-30 11:22 評論0 收藏0