多余文字省略解决方案

zqhxuyuan 发布于2019-08-01 16:21 / 2055人阅读

摘要：本文将讨论单行和多行文字省略的方案，特别是多行文字的省略，不像单行省略的解决方案那么简单全面，故本文重点讨论多行文字的方案。则不显示超出容器的文字内容，若无此属性，文字会显示超过容器而不省略。总结本文介绍的多余文字省略方案，都是较为常用的。

网页前端开发过程中，后端传来的文本数据长短不可控，如果接收到的文本非常长且又没有作自适应处理，页面效果会十分可怕。自适应处理在这种场景下确实很重要，不过，另一种解决方案同样也可以考虑，那就是本文将要讨论的省略多余文字，尤其是在移动端屏幕资源有限的情况下，更应该采用省略文字的解决方案。
本文将讨论单行和多行文字省略的方案，特别是多行文字的省略，不像单行省略的解决方案那么简单全面，故本文重点讨论多行文字的方案。

单行文字省略

单行文字的省略方案已经有比较主流又有效的解决方案，就是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来解决。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/50461.html

多余文字省略解决方案

摘要：本文将讨论单行和多行文字省略的方案，特别是多行文字的省略，不像单行省略的解决方案那么简单全面，故本文重点讨论多行文字的方案。则不显示超出容器的文字内容，若无此属性，文字会显示超过容器而不省略。总结本文介绍的多余文字省略方案，都是较为常用的。网页前端开发过程中，后端传来的文本数据长短不可控，如果接收到的文本非常长且又没有作自适应处理，页面效果会十分可怕。自适应处理在这种场景下确实很重要...

ThinkSNS 2019-08-20 14:24 评论0 收藏0
多余文字省略解决方案

摘要：本文将讨论单行和多行文字省略的方案，特别是多行文字的省略，不像单行省略的解决方案那么简单全面，故本文重点讨论多行文字的方案。则不显示超出容器的文字内容，若无此属性，文字会显示超过容器而不省略。总结本文介绍的多余文字省略方案，都是较为常用的。网页前端开发过程中，后端传来的文本数据长短不可控，如果接收到的文本非常长且又没有作自适应处理，页面效果会十分可怕。自适应处理在这种场景下确实很重要...

joy968 2019-08-30 15:52 评论0 收藏0
【效果实现】在照片上面显示一段文字，最多两行，多余部分用省略号表示

摘要：思路照片上面显示文字，怎么实现呢将照片作为的背景呀效果图多行文本溢出显示我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字单行文本溢出思路：照片上面显示文字，怎么实现呢？将照片作为div的背景呀！效果图： showImg(https://segmentfault.com/img/bVbuV...

PascalXie 2019-08-02 15:32 评论0 收藏0
【效果实现】在照片上面显示一段文字，最多两行，多余部分用省略号表示

摘要：思路照片上面显示文字，怎么实现呢将照片作为的背景呀效果图多行文本溢出显示我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字我是一段很长的文字单行文本溢出思路：照片上面显示文字，怎么实现呢？将照片作为div的背景呀！效果图： showImg(https://segmentfault.com/img/bVbuV...

alaege 2019-08-30 11:22 评论0 收藏0