CSS溢出隐藏

溢出隐藏

溢出隐藏2行

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

溢出隐藏省略1行

overflow: hidden; 
white-space: nowrap;
text-overflow: ellipsis;

nvue中溢出溢出一行或多行

lines:1;
text-overflow:ellipsis;

JS判断是否显示了省略号

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

let cHeight = noWrapDiv.clientHeight;
let sHeight = noWrapDiv.scrollHeight;
if (sHeight > cHeight) {
      console.log("已经溢出显示省略号");
} else {
      console.log("没有溢出");
}

这里可以用于判断是否溢出显示展开收缩按钮。

知识点拓展

scrollHeight：元素内容的高度，包括由于溢出导致的视图中不可见内容。不包含滚动条、边框和外边距。

clientHeight：元素内容的可视区的高度，包含内边距，但不包括水平滚动条、边框和外边距。

offsetHeight：元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。