如何判断文本是否溢出

对于一些文本内容超过包裹层，我们经常会采用省略号的形式取隐藏溢出部分，而这通常只需要通过css就可以解决

#single-line {
  width: 100px;
  border: 1px solid #333;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

#multi-line {
  width: 100px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}


<div id="single-line">1234567876543213456784323456</div>
<div id="multi-line">123456787654321345678432345612345678765432134567843234561234567876543213456784323456123456787654321345678432345612345678765432134567843234561234567876543213456784323456</div>

那么有需求需要知道当前文本内容是否有溢出，需要如何判断？

单行：如果溢出就只能向右超出，所以我们需要判断文本的长度是否大于包裹层（可视层）的宽度

var single = document.getElementById("single-line")
// 如果文本内容的整体宽度大于其可视宽度，那么就说明溢出了
if (single.scrollWidth > single.clientWidth) {
    // do something
}

多行：如果溢出就是向下溢出，所以需要判断的是高度

var multi = document.getElementById("multi-line")
// 如果文本内容的整体高度大于其可视高度，那么就说明溢出了
if (multi.scrollHeight > multi.clientHeight) {
    // do something
}