text-overflow: ellipsis判断文本是否超出

我们经常会用到超出隐藏的css代码：

/*
文字溢出不换行，显示省略号，分别是1行 2行 3行的控制
 */
.no-wrap, .multi-2-no-wrap, .multi-3-no-wrap {
  overflow: hidden;
  text-overflow: ellipsis;
}

.multi-2-no-wrap, .multi-3-no-wrap {
  -webkit-box-orient: vertical;
  display: -webkit-box;
}

.no-wrap {
  white-space: nowrap;
}

.multi-2-no-wrap {
  -webkit-line-clamp: 2;
}

.multi-3-no-wrap {
  -webkit-line-clamp: 3;
}

有时候我们需要知道是否已经溢出，显示三个点的省略号，可以用到clientWidth和scrollWidth的知识：

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

知识点拓展之offsetwidth clientwidth scrollwidth

scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。
clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。
offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。