文本溢出处理(显示省略号)之溢出事件监听

1.文本显示溢出处理以及注意事项

在处理前端的文本时候，我们可能需要对多余的文本进行省略显示。

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

前提保证：当前包裹文本dom元素要是块元素，其次要有固定的宽度。

-webkit-line-clamp  代表文本元素 想要显示的行数

-webkit-box-orient 表示指定子元素的排列方向，注意：这个属性在低版本浏览器编译的时候可能会丢失，推荐写法:

/* autoprefixer: ignore next */
-webkit-box-orient: vertical;

-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

• display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
• -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
• text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。

对于单行文本显示省略还是推荐使用：

display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

2.文本溢出事件判断

接到一个需求：文本从接口动态获取后在页面只显示三行，超过三行显示省略号...，并且要显示一个 详情按钮，点击按钮查看所有文本内容。没超过三行不做处理。

初想：通过获取文本域宽度除以文本中文字的宽度去进行长度限制。做到一半发现进入误区，此方法并不能完美限制，而且很麻烦，文本如果又不同字符长度是不一样的。写代码我只要觉得写的很累很麻烦的时候我一定会放弃，代表方式以及思路错了。重新去查资料。

后续思考实践：通过获取文本域的dom节点的 clientHeight  (dom元素的可见高度)和 scrollHeigth （文本实际高度，即可见高度+隐藏高度）进行比较，如果 scrollHeigth大于clientHeight则代表内容超出已经显示...了。

var cHeight = document.getElementsByClassName('text-overflow')[1].clientHeight;
var sHeight = document.getElementsByClassName('text-overflow')[1].scrollHeight;
if (sHeight >cHeight) {
	console.log("已经溢出显示省略号");
} else {
	console.log("没有溢出");
}

到此及完美解决。

后续：如果考虑页面动态变化问题，那就要考虑监听页面变化实时去获取dom的高度变化重新去判断。