fit-content 实现宽度适配内容

刀刀

0字

0分钟

2026/8/16

CSS 效果实现

先看一个案例：

若蓝色背景盒子宽度为内容的宽度，此时只需要设置其宽度属性。代码：

css

.title {
  width: fit-content;
}

修改后效果如下：

修改后的效果

该方法无兼容问题。MDN 文档：fit-content 。

CSSwidth 属性有三种属性：max-content 、min-content 以及 fit-content ，三者的区别如下：

max-content
max-content 尺寸关键字代表了内容的最大宽度或最大高度。对于文本内容而言，这意味着内容即便溢出也不会被换行。
效果如下：
min-content
min-content 是一个 CSS 的尺寸关键字，表示的是内容的最小宽度。对于文本内容而言，这意味着内容会利用所有软换行的机会，变得尽可能的小，大小不会超过最长单词的宽度。
效果如下：
fit-content
fit-content 行为类似于 fit-content(stretch)，实际上这意味着盒子会使用可用的空间，但永远不会超过 max-content。
fit-content 属性可以用于设置元素的 width、height、min-width、min-height、max-width 和 max-height，此时最大和最小尺寸将基于元素的内容尺寸计算。
效果如下：