求助：实现多行文本截断时自动调整字体大小的方案

要实现当多行文本被截断时调整字体大小的需求，可以通过JavaScript对比元素的实际内容高度和可见高度来判断是否发生截断，具体方案如下：

核心思路 #

用-webkit-line-clamp实现的多行截断无法直接通过CSS检测状态，但可以利用元素的两个属性做对比：

• clientHeight：元素的可见高度（包含内边距，不含边框、滚动条）
• scrollHeight：元素内容的实际高度（包含超出可见区域的部分）

当scrollHeight > clientHeight时，说明内容被截断隐藏，此时即可调整字体大小。

完整实现代码 #

HTML #

<div>
  This is really long text that should
  definitely wrap for three lines and
  then terminate in an ellipsis if it's
  still too long, which it definitely is.
  It also needs to be a smaller font size.
</div>
<hr/>
<div>
  This text isn't long enough so it
  should be bigger.
</div>

CSS #

div {
  font-size: 20px;
  max-width: 200px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 消除内边距对高度计算的干扰 */
  padding: 0;
  margin: 0 0 10px;
}

JavaScript #

// 等待DOM完全渲染后执行检测
document.addEventListener('DOMContentLoaded', function() {
  const textDivs = document.querySelectorAll('div');
  
  textDivs.forEach(div => {
    // 对比内容实际高度与元素可见高度
    if (div.scrollHeight > div.clientHeight) {
      // 文本被截断，设置目标字体大小
      div.style.fontSize = '16px';
    }
  });
});

注意事项 #

1. 执行时机：必须确保元素渲染完成后再执行检测，否则scrollHeight和clientHeight会获取错误值，推荐用DOMContentLoaded事件或把JS代码放在页面底部。
2. 样式干扰：如果元素设置了内边距，需确保计算高度时考虑内边距影响，本例中通过padding:0避免干扰。
3. 兼容性：-webkit-line-clamp是webkit内核特性，非webkit旧版浏览器可能不生效，但检测逻辑本身不受影响，只要overflow:hidden生效即可。

内容的提问来源于stack exchange，提问作者gregsdennis