本文介绍如何通过 javascript 检测 `.entry-title` 元素是否发生文本溢出，并在检测到溢出时自动缩小字体尺寸，同时提供更优的响应式替代方案与实用代码示例。
在 Web 开发中，确保标题文本在有限容器内完整显示是常见需求。CSS 原生支持 text-overflow: ellipsis 实现单行截断，但若希望避免截断、改用缩放字体来适配内容，则需借助 JavaScript 进行动态检测与调整。
✅ 单行标题的可靠检测方案
当 .entry-title 为单行文本（即设置了 white-space: nowrap、固定高度且无换行）时，可通过比较 scrollWidth 与 clientWidth 精准判断是否溢出：
function adjustFontSizeIfOverflow(el, baseSize = '1.42em', step = 0.95, minSize = '0.8em') {
const style = getComputedStyle(el);
let currentSize = parseFloat(style.fontSize) || parseFloat(baseSize);
const unit = style.fontSize.match(/([a-z%]+)/i)?.[1] || 'em';
// 循环缩小直到不溢出或达到最小字号
while (el.scrollWidth > el.clientWidth && parseFloat(style.fontSize) > parseFloat(minSize)) {
currentSize *= step;
el.style.fontSize = `${currentSize}${unit}`;
}
}
// 应用于所有 .entry-title 元素
document.querySelectorAll('.entry-title').forEach(title => {
// 确保样式已应用（如从 CSS 继承了 white-space: nowrap）
title.style.whiteSpace = 'nowrap';
title.style.overflow = 'hidden';
title.style.textOverflow = 'ellipsis';
adjustFontSizeIfOverflow(title);
});⚠️ 注意：该方法仅适用于单行、纯文本或简单内联元素的标题。若含 、图标、line-height 异常或 letter-spacing 等复杂样式，scrollWidth 可能失真，需额外重置或强制 layout（如 offsetHeight 触发重排）。
? 多行标题的局限性说明
对于多行标题（如 display: -webkit-box 或 line-clamp），动态缩放字体极难精准控制——因为：
- 行高、字间距、断行位置、字体渲染差异均影响实际占用高度；
- scrollHeight 无法区分“因字体过大导致换行增多”还是“内容本身过长”；
- 频繁读写样式会引发重排（reflow），显著影响性能，尤其在滚动或窗口缩放时。
因此，不推荐对多行标题使用 JS 动态缩放。
立即学习“Java免费学习笔记（深入）”；
✅ 更优实践：优先采用响应式 CSS + 语义化降级
现代开发中，应优先使用声明式、高性能的 CSS 方案：
.entry-title {
font-size: clamp(1rem, 4vw, 1.42em); /* 浏览器原生响应式缩放 */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 或搭配媒体查询精细控制 */
@media (max-width: 768px) {
.entry-title { font-size: 1.2em; }
}
@media (max-width: 480px) {
.entry-title { font-size: 1.05em; }
}clamp() 是目前最简洁可靠的响应式字体方案（兼容 Chrome 88+、Firefox 79+、Safari 13.4+），它在最小值、首选值和最大值之间平滑插值，无需 JS 即可适配不同视口。
✅ 总结建议
| 场景 | 推荐方案 | 说明 |
|---|---|---|
| 单行标题 + 强制适配 | JavaScript scrollWidth 检测 + fontSize 调整 | 可控性强，适合小范围、低频更新场景 |
| 多行标题 / 高性能要求 | clamp() 或 @media 查询 | 零 JS、零重排、浏览器优化充分 |
| 需要服务端/SEO 友好 | 服务端预计算 + 添加 class 控制字体 | 避免客户端闪动，提升首屏体验 |
最终选择应基于实际需求权衡：追求极致兼容性？选媒体查询；追求动态灵活性？用 JS 检测；追求现代简洁？clamp() 是首选。
