如何在CSS中避免单行文本换行，改为缩小文本适配容器

针对你遇到的「单行文本无法用text-align: justify对齐」以及「容器缩小时字号自适应避免溢出」的需求，这里提供几个实用解决方案：

方案1：用text-align-last强制单行对齐 #

text-align-last属性专门控制最后一行文本的对齐方式，刚好适配你的单行场景，再配合clamp()实现字号随容器宽度动态缩放：

.text-box {
  white-space: nowrap; /* 强制文本单行显示 */
  text-align-last: justify; /* 让唯一一行（即最后一行）两端对齐 */
  font-size: clamp(12px, 2vw, 2rem); /* 字号在12px到2rem之间，随容器宽度自适应 */
  padding: 0 10px; /* 可选：避免文本贴容器边缘 */
}

这个方案代码最简洁，现代浏览器都支持，无需调整HTML结构。

方案2：Flex布局模拟两端对齐 #

如果需要兼容更旧的浏览器，可以用Flex布局，把文本拆成独立的行内元素，通过justify-content: space-between实现两端对齐：

HTML结构 #

<div class="flex-text">
  <span>少量</span>
  <span>测试</span>
  <span>文本</span>
</div>

CSS样式 #

.flex-text {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap; /* 禁止换行，保持单行 */
  font-size: clamp(12px, 2vw, 2rem);
  padding: 0 10px;
}

这个方案兼容性拉满，但需要把文本按单词/词组拆分。

方案3：伪元素辅助实现对齐 #

不想拆分文本的话，也可以用伪元素填充剩余空间，让text-align: justify生效：

.text-box {
  white-space: nowrap;
  text-align: justify;
  font-size: clamp(12px, 2vw, 2rem);
  padding: 0 10px;
}
.text-box::after {
  content: "";
  display: inline-block;
  width: 100%; /* 占满容器宽度，触发justify对齐 */
}

这个方法无需调整HTML，也能兼容大部分浏览器。

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