如何让固定高度的多行文本元素自动适配宽度避免溢出？

我完全懂你想要的效果——容器钉死200px高度，宽度自动调整，让文本刚好填满这个高度，既不会溢出也不会留多余空白。之前你试的min-content、Grid/Flex可能没搭配对正确属性，试试下面这几个方案：

方案1：inline-block 基础适配 #

这是最直接的实现方式，核心是让容器宽度由内容决定，同时允许文本换行适配固定高度：

.text-container {
  height: 200px;
  display: inline-block;
  white-space: pre-wrap; /* 保留文本原有空格/换行，同时允许自动换行 */
  line-height: 1.5; /* 按需调整，让文本刚好填满200px高度 */
  max-width: 100%; /* 可选，防止极端情况下宽度超出视口 */
}

为什么这个方案能行？ #

• display: inline-block：让容器宽度跟随内部内容自动收缩，而非强制撑满父容器，同时支持设置固定高度。
• white-space: pre-wrap：保证文本在宽度不足时自动换行，不会横向溢出，同时保留原始文本的格式。
• line-height：通过调整行高，可以精准控制200px高度内能容纳的行数，比如16px字体搭配1.5行高，每行约24px，200px刚好能放下8行左右，你可以根据自己的文本内容微调这个值。

方案2：Inline Grid 替代方案 #

如果你更习惯用Grid布局，只要把display: grid改成inline-grid，就能实现同样的宽度自适应效果：

.text-container {
  height: 200px;
  display: inline-grid;
  white-space: pre-wrap;
  line-height: 1.5;
}

为什么你之前的尝试没生效？ #

• min-content：这个属性会取内容的最小宽度（也就是文本不换行的宽度），直接导致容器高度超过200px，完全不符合你的需求。
• 普通Grid/Flex：如果只设置display: grid或display: flex，容器会默认撑满父容器宽度，自然无法实现宽度跟随内容收缩的效果，改成inline-grid/inline-flex就能解决这个问题。

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