如何让DIV在文本换行时紧密包裹内容并优化换行布局？

嘿，我完全懂你这个需求！就是想让tooltip这类容器在文本不得不换行的时候，能自动调整宽度，让各行文本分布更均匀，别留一大片尴尬的空白对吧？刚好有几个CSS属性组合起来就能完美解决这个问题，我给你一步步拆解清楚：

首先，你的核心诉求是让容器尽可能贴合内容，但在需要换行时，能自动平衡每行文本的长度，避免出现“第一行空一大段、第二行只有几个字”的情况。我们可以通过调整宽度控制属性+文本换行优化的属性来实现：

关键CSS属性解析 #

• width: fit-content：让容器的基础宽度刚好容纳内容的“理想宽度”（也就是不换行时的宽度），不会无故撑宽；当内容长度超过我们设定的最大宽度时，就会自动触发换行。
• text-wrap: balance：这是解决你“空白浪费”问题的核心！这个CSS属性会自动调整文本的换行位置，让多行文本的长度尽可能接近，从根源上避免某一行留大量空白的情况，完美实现你要的“tighten up”效果。
• max-width: 25em：给容器设置一个最大宽度上限，避免极端长文本把容器撑得太宽，破坏页面布局。

调整后的完整代码 #

HTML结构（保留你原有的结构即可） #

<div class="tooltip">Short</div><br>
<div class="tooltip">Suppose I have</div><br>
<div class="tooltip">Suppose I have a long title</div><br>
<div class="tooltip">Suppose I have a long title with lots of text.</div><br>
<div class="tooltip">Suppose I have a long title with lots of big, extraordinary long words</div>

优化后的CSS代码 #

* {margin: 0; box-sizing: border-box; } 
body { 
  font: 1rem/1.4 system-ui, sans-serif; 
  background: hsl(212, 8%, 50%); 
  padding: 2rem; /* 加个内边距，让内容不贴浏览器边缘 */
} 
.tooltip { 
  display: inline-flex; 
  border-radius: 0.2rem; 
  color: hsl(82, 46%, 100%); 
  border: 0.2em solid currentColor; 
  background-color: hsl(82, 46%, 24%); 
  padding: 0.2em 0.4em; 
  font-size: 0.8rem; 
  max-width: 25em; /* 限制容器最大宽度，避免过度拉伸 */
  width: fit-content; /* 基础宽度贴合内容，不换行时刚好包裹文本 */
  text-wrap: balance; /* 重点！平衡多行文本长度，减少空白浪费 */
}

效果说明 #

1. 短文本：比如"Short"，容器宽度会刚好包裹文本，没有多余空白；
2. 中等长度文本：如果内容长度没超过max-width，容器会保持“刚好包裹”的宽度；如果接近max-width，text-wrap: balance会自动调整换行位置，让两行文本长度尽可能接近；
3. 超长文本/带长单词的内容：触发换行后，各行文本会均匀分布，不会出现某一行空出大片空间的情况，同时容器宽度会贴合换行后的内容整体，不会无故撑宽。

如果需要兼容极少数不支持text-wrap: balance的旧浏览器，可以用text-align: justify替代，但text-wrap: balance的效果更自然，是当前现代浏览器（Chrome、Firefox、Edge等）都支持的推荐方案。

内容来源于stack exchange