Detect Overflow

下面展示的这段 CSS 设置非常常见，可以让文字超过宽度的时候，显示 ...：

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

在实际业务中，经常会碰到这样的需求：只有当显示出 ... 的时候，才做某些事情（比如，才在鼠标悬停的时候展示 Tooltip，用以显示完整的文字内容）。CSS 本身并没有提供足够的接口，让开发者可以直观的了解到当前的文字内容是否已经超出了可以显示的范围。如果需要判断当前内容是否超出了元素的宽度（因而让 CSS 渲染出 ...），可以用下面的 JavaScript 代码：

function isOverflow(element) {
  return element.scrollWidth !== element.clientWidth;
}

根据 MDN 的介绍，scrollWidth 是一个制度元素，其值等于该元素实际的宽度（包含了元素因为 overflow 没有展示出来的部分）；而于此相对的，clientWidth 是元素实际展示的宽度。注，对行内元素和没有 CSS 的元素来说，clientWidth 是 0，具体见 MDN。针对判断是否出 ... 的情况，这里不需要考虑 clientWidth 的特殊情况。因为 scrollWidth 实际给出的值包含了被隐去的部分，因而当 scrollWidth 和 clientWidth 不想等的时候，就可以认定当前有部分内容被隐去了，因而 ... 也出现了。