如何让设置max-width的文本容器换行后紧密贴合文本宽度？

假设存在一个仅包含文本的段落元素：

<p>
  Foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar foobar
</p>

常规实现宽度上限的写法是给元素设置display: inline-block搭配max-width：

p {
  display: inline-block;
  max-width: 100px;
}

这种写法虽然能把宽度限制在100px以内，但存在明显缺陷：只要文本触发换行，容器就会始终占满100px的宽度，哪怕实际换行后文本的最大宽度远小于100px，容器右侧会出现无意义的空白，无法紧密贴合文本内容：

试过fit-content、max-content、min-content和width、min-width、max-width的各种属性组合，都达不到预期效果：

• 单独设width: min-content确实能让容器紧贴文本，但会出现过度换行的问题，每个单词单独占一行，必须加min-width约束才能正常显示
• 但固定值的min-width根本适配不了动态内容：如果内容只有“OK”这类短文本，固定的最小宽度会让容器比文本宽出一大截，完全失去紧贴效果

可行实现方案 #

全兼容写法（支持所有主流浏览器） #

使用display: table替代inline-block，利用表格布局的宽度计算逻辑实现需求：

p {
  display: table;
  max-width: 100px;
  table-layout: auto;
  word-break: break-word;
  /* 按需重置p标签默认边距 */
  margin: 0;
}

这个写法可以同时满足所有要求：

• 容器宽度永远不会超过设定的100px上限
• 短文本场景下（如内容为“OK”），容器宽度会完全贴合文本尺寸，无多余空白
• 长文本触发换行时，容器会自动收缩到换行后最长一行文本的宽度，不会硬撑满max-width留空白
• 浏览器会自动计算最优换行位置，不会出现逐词换行的极端问题

实现原理：inline-block的宽度计算逻辑是先以max-width为可用宽度完成文本换行，之后不会再反向收缩容器宽度适配内容；而display: table的自动布局模式会迭代计算宽度，在不超过max-width限制的前提下，自动找到能合理容纳文本的最小容器宽度。

现代浏览器简化写法 #

针对支持text-wrap: balance的现代浏览器（Chrome 114+、Safari 17.5+、Firefox 121+），可以用更简洁的属性组合实现：

p {
  display: inline-block;
  max-width: 100px;
  text-wrap: balance;
}

text-wrap: balance会让浏览器自动平衡每行文本的长度，同时自动让容器宽度收缩到适配平衡后的文本尺寸，不需要额外设置其他宽度属性。

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