Js最全的 “文本溢出截断省略” 方案合集

来源:http://www.chinese-glasses.com 作者:Web前端 人气:134 发布时间:2020-03-24
摘要:时间: 2019-11-05阅读: 84标签:文本本文首发于政采云前端团队博客:可能是最全的 “文本溢出截断省略”方案合集前言 CSS多行文本溢出省略显示 文本溢出我们经常用到的应该就是text-ov

时间: 2019-11-05阅读: 84标签: 文本本文首发于政采云前端团队博客:可能是最全的 “文本溢出截断省略” 方案合集前言

CSS多行文本溢出省略显示
文本溢出我们经常用到的应该就是text-overflow:ellipsis了,相信大家也很熟悉,但是对于多行文本的溢出处理确接触的不是很多,最近在公司群里面有同事问到,并且自己也遇到过这个问题,所以专门研究过这个问题。

在我们的日常开发工作中,文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去 “稀松平常” ,但在实现上却有不同的区分,是单行截断还是多行截断?多行的截断判断是基于行数还是基于高度?这些问题之下,都有哪些实现方案?他们之间的差异性和场景适应性又是如何?凡事就怕较真,较真必有成长。本文试图通过编码实践,给出一些答案。

首先我们回顾一下以前实现单行缩略是可以通过下面的代码实现的(部分浏览器需要设置宽度):

先来点基础的,单行文本溢出省略

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
WebKit内核浏览器解决办法
首先,WebKit内核的浏览器实现起来比较简单,可以通过添加一个-webkit-line-clamp的私有属性来实现,-webkit-line-clamp是用来限制在一个块元素显示的文本的行数。 为了实现这个效果,它需要组合其他的WebKit属性:

核心 CSS 语句

display: -webkit-box 将对象作为弹性伸缩盒子模型显示;
-webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式;
text-overflow: ellipsis 用省略号“…”隐藏超出范围的文本。
具体代码参考如下:

overflow: hidden;(文字长度超出限定宽度,则隐藏超出的内容)white-space: nowrap;(设置文字在一行显示,不能换行)text-overflow: ellipsis;(规定当文本溢出时,显示省略符号来代表被修剪的文本)

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
这个方法合适WebKit浏览器或移动端(绝大部分是WebKit内核的)浏览器,效果可以查看:

优点

其他浏览器的解决方案
目前没有什么CSS的属性可以直接控制多行文本的省略显示,比较靠谱的办法应该就是利用相对定位在最后面加上一个省略号了,代码可以参考下面:

无兼容问题响应式截断文本溢出范围才显示省略号,否则不显示省略号省略号位置显示刚好

p {
position:relative;
line-height:1.5em;
/* 高度为需要显示的行数*行高,比如这里我们显示两行,则为3 */
height:3em;
overflow:hidden;
}
p:after {
content:"...";
position:absolute;
bottom:0;
right:0;
padding: 0 5px;
background-color: #fff;
}
效果如下:

短板

不过这样会有一点问题:

只支持单行文本截断

需要知道显示的行数并设置行高才行;
IE6/7不支持after和content,需要添加一个标签来代替;
省略号的背景颜色跟文本背景颜色一样,并且可能会遮住部分文字,建议可以使用渐变的png背景图片代替。

适用场景

转自:http://lomu.me/post/css-multiline-text-overflow

适用于单行文本溢出显示省略号的情况

Demo

style .demo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }/stylebody div这是一段很长的文本/div/body

进阶一下,多行文本溢出省略(按行数)纯 CSS 实现方案

核心 CSS 语句

-webkit-line-clamp: 2;(用来限制在一个块元素显示的文本的行数,2 表示最多显示 2 行。 为了实现该效果,它需要组合其他的 WebKit 属性)display: -webkit-box;(和1结合使用,将对象作为弹性伸缩盒子模型显示 )-webkit-box-orient: vertical;(和 1 结合使用 ,设置或检索伸缩盒对象的子元素的排列方式 )overflow: hidden;(文本溢出限定的宽度就隐藏内容)text-overflow: ellipsis;(多行文本的情况下,用省略号“…”隐藏溢出范围的文本)

优点

响应式截断文本溢出范围才显示省略号,否则不显示省略号省略号显示位置刚好

短板

兼容性一般: -webkit-line-clamp 属性只有 WebKit 内核的浏览器才支持

适用场景

多适用于移动端页面,因为移动设备浏览器更多是基于 WebKit 内核

Demo

style .demo { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }/stylebody div这是一段很长的文本/div/body

基于 JavaScript 的实现方案

优点

无兼容问题响应式截断文本溢出范围才显示省略号,否则不显示省略号

短板

需要 JS 实现,背离展示和行为相分离原则文本为中英文混合时,省略号显示位置略有偏差

适用场景

适用于响应式截断,多行文本溢出省略的情况

Demo

当前仅适用于文本为中文,若文本中有英文,可自行修改

script type="text/javascript" const text = '这是一段很长的文本'; const totalTextLen = text.length; const formatStr = () = { const ele = document.getElementsByClassName('demo')[0]; const lineNum = 2; const baseWidth = window.getComputedStyle(ele).width; const baseFontSize = window.getComputedStyle(ele).fontSize; const lineWidth = +baseWidth.slice(0, -2); // 所计算的strNum为元素内部一行可容纳的字数(不区分中英文) const strNum = Math.floor(lineWidth / +baseFontSize.slice(0, -2)); let content = ''; // 多行可容纳总字数 const totalStrNum = Math.floor(strNum * lineNum); const lastIndex = totalStrNum - totalTextLen; if (totalTextLen  totalStrNum) { content = text.slice(0, lastIndex - 3).concat('...'); } else { content = text; } ele.innerHTML = content; } formatStr(); window.onresize = () = { formatStr(); };/scriptbody div class='demo'/div/body

再进阶一步,多行文本溢出省略(按高度)多行文本溢出不显示省略号

核心 CSS 语句

本文由10bet发布于Web前端,转载请注明出处:Js最全的 “文本溢出截断省略” 方案合集

关键词:

最火资讯