宽度适配内容

刀刀

1/3/2025

0 字

0 分钟

效果实现

先看一个案例：

我们希望蓝色背景盒子宽度为内容的宽度，此时只需要设置其宽度属性。代码如下：

.title {
  width: fit-content;
}

修改后效果如下：

且该方法没有任何兼容问题。MDN 文档解释指路：fit-content 。

区别

CSS width 属性有三种属性：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，此时最大和最小尺寸将基于元素的内容尺寸计算。

  效果如下：

  

max-content 和 fit-content 在自己内容不足以撑满父盒子时，宽度只为自己内容的最大宽度，不会再强行增大。

fit-content 官方给出可以表示为一个公式：

总体效果