关于控制文本溢出省略的笔记

单行文本溢出
要点：

1. 设置不换行
2. 设置溢出部分隐藏
3. 设置文本溢出省略

.overflow-ellipsis-1{
	width: 300px;
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

<div class="overflow-ellipsis-1">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>

效果：

多行文本溢出
1、css控制（webkit内核可使用）
要点：

1. 设置显示框类型为弹性伸缩盒子
2. 设置子元素的排列方式
3. 设置块元素文本显示的行数。
4. 设置溢出部分隐藏
5. 设置文本溢出省略

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

<div class="overflow-ellipsis-3">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>

效果：

2、js控制
要点：

1. 需要设置高度。
2. 块元素溢出部分隐藏。
3. js判断元素内容高度是否大于元素可视高度，如果大于，则逐个删除末尾字符，一直到循环结束。

.overflow-ellipsis{
	width: 300px;
	height: 70px;
	overflow: hidden;
}

<div class="overflow-ellipsis">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>

var div = document.querySelector('.overflow-ellipsis');
while (div.clientHeight < div.scrollHeight){
	div.innerHTML = div.innerHTML.replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/ , '...');
}

效果：

参考博文：4种方法实现单行、多行——文本溢出显示省略号