CSS布局需求：容器随标题扩展，正文按需换行不撑大容器

在tooltip、modal这类脱离常规布局流的绝对定位容器中，需要实现：

• 蓝色标题单行显示，主动撑大容器（保持默认收缩适配内容的行为）
• 红色正文仅填充容器当前宽度，超出部分自动换行，而非继续撑大容器

当前无直接对应CSS属性实现这种“主动换行”布局，以下是可行解决方案：

方案1：使用Grid布局 #

利用Grid的轨道宽度特性，让容器的宽度由标题元素决定，正文自动继承该宽度并换行：

article {
  position: absolute;
  background: whitesmoke;
  padding: 1em 2em;
  display: grid; /* 开启Grid布局，子元素共享同一列宽度 */
}

header {
  color: blue;
  white-space: nowrap; /* 强制标题单行，确保准确撑大容器 */
}

main {
  color: red;
  /* 无需额外设置，Grid会自动让正文填满列宽，文本超出自动换行 */
}

方案2：使用fit-content + 宽度继承 #

先让容器宽度由标题内容决定，再强制正文宽度等于容器宽度：

article {
  position: absolute;
  background: whitesmoke;
  padding: 1em 2em;
  width: fit-content; /* 容器宽度适配标题内容 */
}

header {
  color: blue;
  white-space: nowrap;
}

main {
  color: red;
  width: 100%; /* 正文宽度强制等于容器宽度，文本超出换行 */
}

原理说明 #

• 绝对定位容器默认宽度为fit-content（收缩适配内容），通过white-space: nowrap确保标题单行展示，以此确定容器的基础宽度
• 两种方案都是让正文元素的宽度绑定到容器已确定的宽度上，从而实现“填充可用空间后换行”的效果

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