如何使用CSS防止文本溢出其父容器？

针对文本溢出容器、无法自动缩小适配的问题，提供以下纯CSS实现方案：

方案一：使用clamp()动态调整字号（推荐） #

通过CSS的clamp()函数结合容器尺寸动态计算字体大小，同时限制文本区域在容器范围内：

div {
  display: inline-block;
  width: 60px;
  height: 12px;
  overflow: hidden; /* 隐藏超出容器的部分 */
  border: 1px solid #eee; /* 可选，方便查看容器边界 */
}

p {
  width: 100%;
  height: 100%;
  margin: 0; /* 清除p标签默认边距 */
  text-align: center;
  line-height: 12px; /* 让文字垂直居中 */
  /* 最小8px，最大12px，根据容器宽度动态计算中间值 */
  font-size: clamp(8px, calc(60px / 8), 12px);
}

<div>
  <p>Reading List</p>
</div>

说明：clamp()的第二个参数是核心计算逻辑，这里用容器宽度除以字符数（示例中"Reading List"约8个字符），确保文字能完整适配容器宽度，同时通过最小/最大值限制字号范围。

方案二：结合max-width与缩放实现灵活适配 #

如果不确定字符数，可通过缩放让文本自适应容器，纯CSS可实现基础效果，配合JS能自动计算缩放比例：

纯CSS基础版 #

div {
  display: inline-block;
  width: 60px;
  height: 12px;
  overflow: hidden;
  position: relative;
  border: 1px solid #eee;
}

p {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.7); /* 手动调整缩放比例 */
  transform-origin: center;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  text-align: center;
  font-size: 12px;
}

JS自动计算缩放版 #

div {
  display: inline-block;
  width: 60px;
  height: 12px;
  overflow: hidden;
  position: relative;
  border: 1px solid #eee;
}

p {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  text-align: center;
  font-size: 12px;
}

const p = document.querySelector('p');
const div = document.querySelector('div');
const scale = Math.min(div.clientWidth / p.offsetWidth, div.clientHeight / p.offsetHeight);
p.style.transform = `translate(-50%, -50%) scale(${scale})`;

原代码问题分析 #

1. p标签默认带有上下边距，会占用容器高度导致文字溢出
2. p的width: auto未限制在容器范围内，文字超出容器宽度时不会自动调整
3. 未设置字体大小的自适应逻辑，固定字号下文字容易溢出容器

内容的提问来源于stack exchange，提问作者gala speed