CSS实现元素宽度自适应包裹文本并限制最大宽度

场景与需求 #

现有HTML元素：

<h2>Lorem ipsum</h2>

需要满足以下布局规则：

• 元素宽度限制在特定最大值内
• 文本超出最大宽度时自动拆分为多行
• 文本能在单行容纳时保持不拆分
• 元素宽度仅适配内容实际需求（不无故占满最大宽度）

现有方案的问题 #

1. 仅设置max-width的方案：

h2 {
  max-width: 50%;
  background-color: yellow;
}

当文本换行时，元素会直接占满max-width设定的50%宽度，不符合“仅适配内容需求”的规则。

2. 增加width: min-content的方案：

h2 {
  max-width: 50%;
  background-color: yellow;
  width: min-content;
}

min-content会强制文本尽可能换行，即使内容能在单行容纳也会拆分，违反了规则3。

可行解决方法 #

方法1：使用width: fit-content #

fit-content的特性是让元素宽度取内容所需最小宽度和max-width设定值中的较小值，完美匹配所有规则：

h2 {
  max-width: 50%;
  width: fit-content;
  background-color: yellow;
}

方法2：设置display: inline-block #

inline-block元素的宽度默认由内容决定，配合max-width也能实现需求：

h2 {
  max-width: 50%;
  display: inline-block;
  background-color: yellow;
}

两种方法都能实现：内容较窄时元素宽度贴合文本，内容超过最大宽度时自动换行且元素宽度被限制在设定值内。

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