过剩笔墨省略解决方案

2024年3月10日 195次阅读 来源: _west

网页前端开辟过程当中，后端传来的文本数据是非不可控，假如接收到的文本异常长且又没有作自适应处置惩罚，页面结果会非常恐怖。自适应处置惩罚在这类场景下确切很主要，不过，另一种处理计划一样也可以斟酌，那就是本文将要议论的省略过剩笔墨，尤其是在挪动端屏幕资本有限的状况下，更应当采纳省略笔墨的处理计划。
本文将议论单行和多行笔墨省略的计划，特别是多行笔墨的省略，不像单行省略的处理计划那末简朴周全，故本文重点议论多行笔墨的计划。

单行笔墨省略

单行笔墨的省略计划已有比较主流又有用的处理计划，就是CSS3的text-overflow属性。该属性可以文雅地完成一切单行笔墨省略的需求，而且覆蓋了现在市场上险些一切的阅读器版本（阅读器支撑状况，请参考：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完成。

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

个中overflow:hidden 保证超越行数的内容不显现；display: -webkit-box与-webkit-box-orient: vertical 示意采纳-webkit-box显现，其行数方向为垂直。
这类要领完成起来简朴明了，瑕玷就是受用面太窄，只适用于webkit内核阅读器。而且，-webkit-box已被flex替换，后续不太可能被其他内核阅读器支撑。不过，因为大部分挪动端阅读器（Safari, Android Browser, Chrome）都是webkit内核的，假如该页面仅在挪动端阅读，那末这不失为一种最简朴有用的计划。

计划二：clamp.js

CSS搞不定的事变，只能交给JS了。
处理计划代码，请参考这个堆栈~ https://github.com/yuanqing/l…

基本思绪

先按单词截断，再按字符举行截断。单词与字符的截断要领相似，以截断字符的思绪为例：

  • 每次轮回削减element.innerHTML一个字符；

  • 视察此时的element元素内容的高度是不是满足请求的最大高度；

    • 个中元素内容的高度用element.offsetHeight猎取；

    • 猎取请求的最大高度：因为传入的是最大行数，故而将其与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来处理。

    原文作者：_west
    原文地址: https://segmentfault.com/a/1190000008404083
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞