一行超出显示省略号

1
2
3
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
效果：超出显示省略号超出显示省略号超出显示省略号超出显示省略号超出显示省略号超出显示省略号超出显示省略号

两行（多行）超出显示省略号

显示的行数由 line-clamp 样式的值决定。

1
2
3
4
5
6
overflow: hidden;
white-space: normal;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
效果：超出显示省略号超出显示省略号超出显示省略号超出显示省略号超出显示省略号超出显示省略号超出显示省略号

JS 判断是否显示了省略号

有时候我们需要知道是否已经超出，显示了省略号，可以用到clientHeight和scrollHeight的知识：

1
2
3
4
5
6
7
let cHeight = dom.clientHeight;
let sHeight = dom.scrollHeight;
if (sHeight > cHeight) {
  console.log("已经超出显示省略号");
} else {
  console.log("没有超出");
}

scrollHeight：元素内容的高度，包括由于超出导致的视图中不可见内容。不包含滚动条、边框和外边距。
clientHeight：元素内容的可视区的高度，包含内边距，但不包括水平滚动条、边框和外边距。
offsetHeight：元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。