文字在一行或多行时超出显示省略号
# 文字在一行或多行时超出显示省略号
# 一行超出显示省略
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
1
2
3
2
3
# 两行(多行)超出显示省略号
overflow: hidden;
white-space: normal;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
1
2
3
4
5
6
2
3
4
5
6
显示的行数由line-clamp
样式的值决定。
# JS判断是否显示了省略号
有时候我们需要知道是否已经溢出,显示了省略号,可以用到clientHeight
和scrollHeight
的知识:
let cHeight = noWrapDiv.clientHeight;
let sHeight = noWrapDiv.scrollHeight;
if (sHeight > cHeight) {
console.log("已经溢出显示省略号");
} else {
console.log("没有溢出");
}
1
2
3
4
5
6
7
2
3
4
5
6
7
这里可以用于判断是否溢出显示展开收缩按钮。
# 知识点拓展
scrollHeight:元素内容的高度,包括由于溢出导致的视图中不可见内容。不包含滚动条、边框和外边距。
clientHeight:元素内容的可视区的高度,包含内边距,但不包括水平滚动条、边框和外边距。
offsetHeight:元素的像素高度,高度包含该元素的垂直内边距和边框,且是一个整数。
上次更新: 2021/07/06, 15:45:03