CSS：为何文本容器宽度撑满父级而非随文本收缩？如何设为与文本等宽？

核心原理说明 #

这是CSS布局体系里非常基础的块级元素默认渲染行为。你代码里的.text 是普通块级 div 元素，浏览器对块级元素的默认渲染规则是：水平方向占满父容器的全部可用内容宽度，垂直方向高度跟随内部内容自动撑开。
这个行为是浏览器内置默认样式表定义的，不需要额外写CSS触发——哪怕.text内部只有一个短单词，只要没修改它的宽度计算规则，它的水平宽度就会和父级.container的内容区完全一致，不会根据文本长度自动收缩。

适配内容宽度的修改方案 #

如果要让.text的宽度和内部文本的实际宽度相等，可以根据场景选择以下方案：

• 给.text添加 width: fit-content：这是对原有布局改动最小的方案。修改后元素依然保留块级特性，默认独占一行，宽度会自动匹配内部文本的实际长度，原有的边框、外边距样式不会受到任何影响。
• 给.text添加 display: inline-block：将元素转为行内块显示模式，宽度会自动跟随内部内容收缩，同时保留设置宽高、内外边距的能力。需要注意的是，行内块元素默认会和相邻元素在同一行横向排列，如果需要每个文本块独立占一行，需要额外调整换行规则。
• 将.text对应的标签从div换成span：span是原生行内元素，本身就会根据内容自动调整宽度，但行内元素不支持设置垂直方向的外边距、固定宽高，能适配的场景非常有限，不推荐作为通用方案。

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