CSS3 width：fit-content属性

最新推荐文章于 2024-08-17 23:08:17 发布

xubingnan123

最新推荐文章于 2024-08-17 23:08:17 发布

阅读量6.9w

点赞数 23

分类专栏： css 文章标签： css3

本文链接：https://blog.csdn.net/xubingnan123/article/details/78837498

版权

css 专栏收录该内容

5 篇文章

订阅专栏

昨天在做一个JavaScript练习的时候，我要将一段文字插入到div里，在这个过程中偶然接触到了一个以前不知道的属性——“fit-content”
在实践中也许会遇到这么一种情况，我们给一个固定宽度的div里面输入一厂串连续的英文字母，如果输入的足够多，文字会溢出来，就像这样：
这里写图片描述
只有当输入的是英文的时候才会出现这种情况，因为一长串的英文字母会被默认为是一个单词，而汉字则不会有这个问题。
一般情况下解决这类问题我会添加换行断点的属性，比如：word-wrap或者word-break。
而fit-content属性可以把内容包裹起来
设置：width:-moz-fit-content;(我用的火狐浏览器)
效果：
这里写图片描述
不管你写多长多没关系。
fit-content属性的用处还不止于此，它还可以配合margin：auto；用来设置元素居中：

这里写图片描述

这里写图片描述
但fit-content也有一个小问题：如果一个元素的width已经设置过，再设置width：fit-content；会冲突。最终div的宽度以div内子元素的宽为准，换句话说也就是“向内自适应”。比如咱们创建一个div，在这个div里面放一个100*100的图片，给div的宽度设置为width：200px; 然后再写width：fit-content；虽然还是会居中，但实际这个div的宽还是100。
还有一个问题就是目前这个属性的兼容性不是特别的好，用的时候要加上前缀。
除了fit-content以外，还知道了max-content，mini-content，fill-avaliable属性，还有Intrinsic Sizing（内部尺寸）和Extrinsic Sizing（外部尺寸）特性。这些纳入今后的学习目标，等多做些了解再来总结。