本文介绍一种实用的 javascript 方法，用于检测 `.entry-title` 元素是否发生文本溢出，并在检测到溢出时自动缩小字体尺寸，同时恢复默认换行与截断行为；也对比说明了响应式媒体查询作为高性能替代方案的适用场景。
在实际前端开发中，当标题文字长度不可控（如 CMS 动态生成、多语言适配或用户输入），仅靠 text-overflow: ellipsis + white-space: nowrap 往往无法兼顾单行美观与多端兼容——尤其在窄屏或大字号环境下容易出现截断过早或布局错位。此时，动态检测溢出并按需缩放字体是一种更灵活的解决方案。
✅ 基础实现：单行文本溢出检测（推荐）
以下 JavaScript 代码适用于 .entry-title 为单行内联元素（即设置了 white-space: nowrap）的典型场景：
function adjustTitleFontSize(selector, baseSize = '1.42em', scaleFactor = 0.95, maxAttempts = 5) {
document.querySelectorAll(selector).forEach(el => {
const originalStyle = el.getAttribute('style') || '';
const computed = window.getComputedStyle(el);
// 检查是否溢出：滚动宽度 > 可视宽度
if (el.scrollWidth > el.clientWidth) {
let currentSize = parseFloat(computed.fontSize);
let unit = computed.fontSize.replace(currentSize, '').trim();
for (let i = 0; i < maxAttempts; i++) {
currentSize *= scaleFactor;
el.style.fontSize = `${currentSize}${unit}`;
if (el.scrollWidth <= el.clientWidth) break;
}
// 恢复自然换行与溢出行为（可选）
el.style.whiteSpace = 'normal';
el.style.overflow = 'visible';
el.style.textOverflow = 'clip';
}
});
}
// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
adjustTitleFontSize('.entry-title');
});
// 可选：窗口缩放时重新检测（谨慎使用，建议节流）
window.addEventListener('resize', throttle(() => {
adjustTitleFontSize('.entry-title');
}, 200));
? 注意：throttle 是一个简易节流函数，防止 resize 频繁触发。你可自行添加：function throttle(fn, delay) {
let timeoutId;
return (…args) => {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => fn(…args), delay);
};
}
⚠️ 多行文本的复杂性说明
若 .entry-title 包含多行文本（如设置了 line-clamp、height 或弹性布局），则 scrollWidth 不再可靠——因为其仅反映第一行的渲染宽度，无法反映整体内容高度溢出。此时精确计算所需字体大小需综合：行高、字间距、容器宽高、断行策略、甚至字体度量（font metrics），性能开销显著上升，且易受浏览器渲染差异影响。
因此，不建议对多行标题做实时 JS 字体缩放。更优解是：
立即学习“Java免费学习笔记（深入）”；
? 推荐替代方案：CSS 媒体查询 + 视口单位
对于大多数响应式站点，优先使用声明式 CSS 更高效、可维护性强：
.entry-title {
font-size: clamp(1rem, 4vw, 1.42em); /* 浏览器原生响应式字体 */
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* 或分段控制 */
@media (max-width: 768px) {
.entry-title { font-size: 1.2em; }
}
@media (max-width: 480px) {
.entry-title { font-size: 1.05em; }
}
clamp() 函数（现代浏览器支持 ≥95%）能智能约束字体在最小值、首选值与最大值之间平滑过渡，无需 JS 即可实现“越小屏幕字体越小”的体验。
✅ 总结建议
- ✅ 单行标题：用 scrollWidth > clientWidth 检测 + JS 动态缩放，简单有效；
- ⚠️ 多行/复杂布局：避免 JS 计算字体，改用 clamp()、vmin 或媒体查询；
- ? 避免高频重排：不要在 resize 中无节流地反复调用 getComputedStyle；
- ? 测试要点：覆盖不同字体族（如中文字体通常更宽）、DPR=2 设备、以及 font-optical-sizing: auto 等新特性影响。
最终选择应权衡「精准控制」与「运行性能」——多数情况下，优雅的 CSS 已足够胜任。