文本溢出显示省略号

发表于 | 分类于 |

单行文本溢出换行

现在已经是 2019 年 8 月了,市面上绝大部分浏览器都已经较好的支持 css3 了,直接使用 css3 的 text-overflow:ellipsis.

1
2
3
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

需要注意的是,有一小部分浏览器需要添加宽度进行兼容.

那如果说一定要用 js 来解决这个问题,就只有获取当前文本宽度判断是否超出设定宽度即可.

多行文本溢出换行

其实这才是这边文章的重点内容.事实上多行文本溢出换行也不复杂,只是记不住 -__-! 直接看代码:

1
2
3
4
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

注意:

  1. 因为使用来-webkit-前缀,所以仅支持 webkit 内核浏览器

  2. -webkit-line-clamp 用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的 WebKit 属性。

  3. display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示

  4. -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式

可事实上国内还有好的 ie 用户,你要和产品讲道理那是行不通的.那要如何兼容非 webkit 内核浏览器呢,答案只有一个.

在这种情况下我们只能用 js 来获取当前文本高度,如果当前文本高度超过来最大高度则循环删除最后一位字符,直到当前高度等于最大高度,然后将最后三个字符替换为省略号.

1
2
3
4
5
6
7
8
9
// 假设当前元素id为id,最大高度为max
let max;
let ele = document.querySelector("#id");
while (ele.offsetHeight > max) {
	ele.innerText = ele.innerText.replace(
		/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/,
		"..."
	);
}

[越努力，越幸运！]