CSS 如何让元素宽度随换行文本贴合内容？

2026-11-06数据小陈

结论

要让边框随每一行文字的实际长度显示，可以使用普通的行内排版。示例中的 h1 设置了 display: flex，它的直接子元素会成为 Flex 项目，行内元素也会被块化。因此，span 不会像普通行内文本那样逐行贴合内容。

调整方式

移除 h1 的 Flex 布局，让 em 和 span 按行内内容排版：

main {
  width: 400px;
  resize: horizontal;
  overflow: auto;
  border: 1px solid black;
}

h1 {
  border: 1px solid blue;
}

h1 > * {
  border: 1px solid red;
}

em {
  font-size: 3em;
}

<main>
  <h1><em>¿</em><span>lengthy-word question</span><em>?</em></h1>
</main>

普通行内排版允许 span 跨行显示，边框会跟随各行的文本片段绘制。文本未换行时，边框看起来会围住整段文字；换行后，边框则沿着每行内容显示。

注意事项

这种做法会改变布局方式，em 和 span 不再作为 Flex 项目排列。如果必须保留 Flex 布局，仅给 Flex 子项设置 width，无法让它的盒子宽度自动贴合换行后每一行文字的实际长度。width: min-content 会按最窄内容尺寸收缩，并不会只在发生换行时生效。