在前端开发中，文本排版问题几乎无处不在：卡片标题、导航标签、按钮文字，这些位置的可用宽度往往是固定的，但内容长度却不受控制。当标题只有五个字时，固定字号看起来很舒适；一旦运营配置了一个二十字的标题，布局立刻被撑破。有没有一种办法，让文字优先保持正常字号单行显示，放不下时自动缩小字号，实在放不下再以省略号截断？答案是肯定的，CSS加上少量JavaScript就能优雅解决。
纯CSS实现单行省略号截断
先解决最基础的问题：无论文字多长，只允许显示一行，超出部分用省略号表示。这需要三个CSS属性配合完成，缺一不可。
.ellipsis {
white-space: nowrap; /* 禁止换行，强制单行显示 */
overflow: hidden; /* 超出容器的部分隐藏 */
text-overflow: ellipsis; /* 超出部分以省略号展示 */
}white-space: nowrap告诉浏览器不要折行，所有文字挤在同一行里；overflow: hidden负责把超出容器边界的部分裁掉；而text-overflow: ellipsis则在被裁剪的位置渲染出三个点。很多人只写了后两个属性却发现不起作用，原因就是缺少了nowrap，文字还会正常换行，自然没有溢出可言。
需要注意的是，这套方案只对块级容器或者设置了明确宽度的元素生效。如果是行内元素，要额外加上display: block或者给父级容器设置宽度，否则容器宽度会随内容自动撑开，永远不会触发溢出。
用JavaScript动态缩小字号，放不下再截断
纯省略号方案虽然稳妥，但会丢失内容。更友好的体验是：先尝试缩小字号让文字完整显示，只有缩到下限仍然放不下时才显示省略号。这就需要借助JavaScript判断文本实际宽度，核心是对比元素的scrollWidth和clientWidth。
原理很简单：scrollWidth代表内容的完整宽度，clientWidth代表容器可视区域的宽度。当scrollWidth大于clientWidth时，说明文字已经溢出，此时把字号调小一点再重新测量，循环往复直到放得下为止。
<div class="auto-fit" data-min="12">这是一个非常长的标题内容需要自动缩小字号</div>
<script>
function fitText(el) {
// 读取允许的最小字号，默认12px
const minSize = parseInt(el.dataset.min || '12', 10);
// 从14px起始尝试，逐像素递减
let size = 14;
el.style.fontSize = size + 'px';
// 只要还溢出且字号没到下限，就继续缩小
while (el.scrollWidth > el.clientWidth && size > minSize) {
size -= 1;
el.style.fontSize = size + 'px';
}
// 缩到下限仍溢出，交回CSS省略号处理
el.style.whiteSpace = 'nowrap';
el.style.overflow = 'hidden';
el.style.textOverflow = 'ellipsis';
}
document.querySelectorAll('.auto-fit').forEach(fitText);
</script>这段代码的关键在于循环条件的设置：一方面字号不能小于下限（一般不建议低于12px，否则可读性太差）；另一方面每次修改字号后浏览器会同步重排，scrollWidth会立即更新，所以循环判断是可靠的。如果担心极端长文本导致循环次数过多，可以改成步长递减，例如每次减2像素，接近目标后再逐像素微调。
还有一个容易踩的坑：字体加载是异步的。如果自定义字体还没加载完成就执行测量，得到的结果是不准确的。建议在document.fonts.ready回调中再执行适配逻辑，或者在字体加载完成事件里重新触发一次测量。
渐进优化：兼容窗口缩放与纯CSS替代方案
上述方案在页面渲染时执行一次，但用户调整窗口大小后，容器宽度变了，字号却停留在旧值。完善的处理方式是监听resize事件，先恢复初始字号再重新适配。
function refitAll() {
document.querySelectorAll('.auto-fit').forEach(el => {
el.style.fontSize = ''; // 清除行内字号，恢复CSS默认值
fitText(el); // 重新执行适配
});
}
let timer = null;
window.addEventListener('resize', () => {
clearTimeout(timer);
timer = setTimeout(refitAll, 150); // 防抖，避免频繁触发
});如果不希望引入JavaScript，现代浏览器还提供了纯CSS的替代思路：利用font-size: clamp()配合容器查询单位。当父容器开启container-type: inline-size后，字号可以根据容器宽度在上下限之间平滑变化。
.card {
container-type: inline-size;
}
.card-title {
/* 字号随容器宽度缩放，最小12px，最大16px */
font-size: clamp(12px, 4cqi, 16px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}cqi是容器内联尺寸单位，1cqi等于容器宽度的百分之一。这种写法完全不需要脚本，性能更好，也天然响应容器变化。不过它是按比例缩放，不感知文字的具体长度，短文本会被放大到上限，长文本可能仍需省略号兜底，精确度不如JavaScript逐像素方案。
综合来看，两种方案各有取舍：追求精确控制、希望长文本尽可能完整展示时，用JavaScript的测量循环方案；追求轻量、维护简单、文本长度差异不极端时，容器查询加clamp的纯CSS方案已经够用。把省略号作为最后的兜底手段，字号自适应作为第一道防线，这样的层次组合能覆盖绝大多数排版场景。
CSS文本省略号JavaScript字号自适应单行文本溢出修改时间：2026-09-12 00:24:35