Javascript 检查文本是否溢出

在前端开发中，我们常常需要检查文本是否溢出，以便做出合适的布局和调整。这篇文章将介绍一些常见的方法来检查文本是否溢出，并解释它们的优缺点。

CSS属性 text-overflow

CSS属性 text-overflow 可以用来控制文本溢出时如何显示。通过设置其值为 ellipsis，可以让溢出的文本显示为省略号。但是，这个属性只适用于一部分情况，例如单行文本溢出的情况。在一些复杂的场景下，如多行文本溢出，text-overflow 并不能解决问题。

显示实际高度和滚动条

另一种方法是通过判断元素的实际高度是否超过了设定的高度来判断文本是否溢出。如果元素的实际高度超过了设定高度，那么就可以显示滚动条，让用户可以滚动查看全部文本。但是这种方法需要计算元素的实际高度，比较麻烦。而且当文本内容发生改变时，需要重新进行计算。

计算文本宽度

最常用的方法是计算文本宽度是否超过了容器宽度。这种方法通常会使用 context.measureText() 来计算文本宽度。具体流程如下：

1. 首先获取文本内容和容器的宽度。
2. 创建一个 canvas 元素，并获取其上下文。
3. 设置字体样式，并使用 context.measureText() 测量文本的宽度。
4. 比较文本宽度和容器宽度，判断是否溢出。

这种方法比较准确，而且对于多行文本溢出也可以有效检测。但是需要额外创建一个 canvas 元素，可能会对性能造成一定的影响。

监听窗口变化

最后一种方法是通过监听窗口变化来实时检查文本是否溢出。如果检测到文本溢出，可以通过修改样式或者重新布局来解决问题。这种方法需要依赖于浏览器的resize事件，而且需要实时计算和更新布局，比较繁琐。但是它可以应对任意场景的文本溢出。

总结来讲，检查文本是否溢出需要根据具体的场景选择合适的方法，每种方法都有其优缺点。如果需要检查多行文本溢出，计算文本宽度是比较推荐的方法。如果只需要支持单行文本溢出，可以考虑使用 text-overflow 属性。如果需要实时检查和更新布局，可以监听窗口变化。