如何使用CSS或JavaScript实现文本适配容器宽度自动调整字号保持单行显示？

前置基础要求 #

不管用哪种实现路径，先把强制单行的基础样式加上，从根源杜绝换行：

• 文本元素加 white-space: nowrap，禁止自动换行
• 外层容器设置明确的固定宽度，作为宽度适配的基准

纯CSS实现方案（无JS开销） #

如果你的文本长度区间是可预测的，不需要根据实际文本内容动态调整字号，用纯CSS就能搞定，核心是靠CSS容器查询单位实现字号随容器宽度等比变化：

.text-wrap {
  /* 固定容器宽度 */
  width: 320px;
  /* 开启内联尺寸容器查询，让子元素可以基于容器宽度计算样式值 */
  container-type: inline-size;
  /* 强制文本不换行 */
  white-space: nowrap;
  /* 字号设置自适应区间：最小12px，最大22px，中间值随容器宽度按比例变化 */
  font-size: clamp(12px, 7cqi, 22px);
}

特点：零JS计算开销，渲染性能拉满，但字号变化只和容器宽度绑定，和实际文本长度无关——比如容器固定320px宽，就算文本只有2个字，字号也不会升到设定的最大值，仅适合文本长度和容器宽度基本匹配的场景。

JavaScript动态适配方案（全场景通用） #

如果是异步渲染、文本长度完全不可控的场景，纯CSS没法实现“根据文本实际溢出程度自动缩字号”的效果，必须靠JS实时测量调整。
实现逻辑没有复杂的trick，非常直白：

• 先把文本字号设为允许的最大值
• 测量当前文本的实际渲染宽度
• 逐次降低字号，直到文本实际宽度小于等于容器的可用宽度
• 监听容器尺寸变化、文本内容变化，触发重新计算

配套CSS代码：

.container {
  width: 320px;
  overflow: hidden;
}
.auto-fit-text {
  white-space: nowrap;
  display: inline-block;
  /* 初始值，实际会被JS覆盖 */
  font-size: 22px;
}

JS实现代码：

/**
 * 自动适配文本字号
 * @param {HTMLElement} container 文本所在的固定宽度容器
 * @param {number} maxFont 允许的最大字号
 * @param {number} minFont 允许的最小字号
 */
function autoFitFont(container, maxFont = 22, minFont = 10) {
  const textEl = container.querySelector('.auto-fit-text');
  // 每次计算前重置为最大字号，避免历史缩放值影响测量准确性
  textEl.style.fontSize = `${maxFont}px`;

  // 逐次缩字号直到文本宽度适配容器
  while (textEl.scrollWidth > container.clientWidth && maxFont > minFont) {
    maxFont--;
    textEl.style.fontSize = `${maxFont}px`;
  }
}

// 页面加载完成后初始化适配
const targetContainer = document.querySelector('.container');
autoFitFont(targetContainer);

// 窗口尺寸变化时重新适配
window.addEventListener('resize', () => autoFitFont(targetContainer));

// 监听容器内的文本变化（比如接口异步更新内容），触发重新适配
const contentObserver = new MutationObserver(() => autoFitFont(targetContainer));
contentObserver.observe(targetContainer, {
  childList: true,
  subtree: true,
  characterData: true
});

注意：适配过程中不要给文本加text-overflow: ellipsis的截断逻辑，否则会把超出容器的文本替换为省略号，无法实现完整展示的需求。整个适配的判断依据始终是文本的实际渲染宽度，不要依赖视觉截断的状态做判断。

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