CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值，用于设置元素的宽度根据其内容自动调整，确保宽度刚好容纳内容而不会超出。

效果对比

• 默认情况（width: auto）：

  • 块级元素（如 <div>）会占满父容器的全部可用宽度。

  • 行内元素（如 <span>）宽度由内容决定。

• fit-content：

  • 块级元素会像行内块一样收缩宽度，但保持块级特性（可设置外边距、换行等）。

  • 类似于 inline-block，但不需要改变显示模式。

示例代码

<div class="container"><div class="fit-content">这个div的宽度会适应内容</div>
</div>

.container {width: 300px;border: 1px solid #ccc;
}
.fit-content {width: fit-content;background: lightblue;padding: 10px;
}

效果：
.fit-content 的宽度不会占满 .container 的 300px，而是根据文本内容自动调整。

注意事项

1. 浏览器支持：现代浏览器均支持，但旧版可能需要前缀（如 -webkit-fit-content）。

2. 与 max-content/min-content 的区别：

   • max-content：宽度扩展至内容所需的最大宽度（可能溢出容器）。

   • min-content：宽度收缩到内容最小单位（如长单词不换行）。

3. 替代方案：
   若需兼容旧浏览器，可用 display: inline-block 或浮动元素模拟类似效果。