多余文字省略解决方案

分享侠
• 阅读 4744

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

单行文字省略

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

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Jacquelyn38 Jacquelyn38
4年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Stella981 Stella981
3年前
Python+Selenium自动化篇
本篇文字主要学习selenium定位页面元素的集中方法,以百度首页为例子。0.元素定位方法主要有:id定位:find\_element\_by\_id('')name定位:find\_element\_by\_name('')class定位:find\_element\_by\_class\_name(''
Stella981 Stella981
3年前
Python之time模块的时间戳、时间字符串格式化与转换
Python处理时间和时间戳的内置模块就有time,和datetime两个,本文先说time模块。关于时间戳的几个概念时间戳,根据1970年1月1日00:00:00开始按秒计算的偏移量。时间元组(struct_time),包含9个元素。 time.struct_time(tm_y
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
为什么mysql不推荐使用雪花ID作为主键
作者:毛辰飞背景在mysql中设计表的时候,mysql官方推荐不要使用uuid或者不连续不重复的雪花id(long形且唯一),而是推荐连续自增的主键id,官方的推荐是auto_increment,那么为什么不建议采用uuid,使用uuid究
Python进阶者 Python进阶者
1年前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
美凌格栋栋酱 美凌格栋栋酱
5个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
分享侠
分享侠
Lv1
朝朝暮暮,沉淀过往,迎来新光。
文章
2
粉丝
0
获赞
0