宽度适配内容

作者:Yuan Tang

更新于:5 个月前

字数统计:500 字

阅读时长:1 分钟

效果实现

先看一个案例：

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

.title {
    width: fit-content;
}

修改后效果如下：

且该方法没有任何兼容问题。MDN 文档解释指路：fit-content](https://developer.mozilla.org/zh-CN/docs/Web/CSS/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`

  https://developer.mozilla.org/zh-CN/docs/Web/CSS/max-content

  tydumpling.cn
  。

  fit-content 属性可以用于设置元素的

  `width`

  https://developer.mozilla.org/zh-CN/docs/Web/CSS/width

  tydumpling.cn
  、
  `height`

  https://developer.mozilla.org/zh-CN/docs/Web/CSS/height

  tydumpling.cn
  、
  `min-width`

  https://developer.mozilla.org/zh-CN/docs/Web/CSS/min-width

  tydumpling.cn
  、
  `min-height`

  https://developer.mozilla.org/zh-CN/docs/Web/CSS/min-height

  tydumpling.cn
  、
  `max-width`

  https://developer.mozilla.org/zh-CN/docs/Web/CSS/max-width

  tydumpling.cn
  和
  `max-height`

  https://developer.mozilla.org/zh-CN/docs/Web/CSS/max-height

  tydumpling.cn
  ，此时最大和最小尺寸将基于元素的内容尺寸计算。

  效果如下：

  

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

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

Contributors

Yuan Tang