CSS3 width：fit-content属性

昨天在做一个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（外部尺寸）特性。这些纳入今后的学习目标，等多做些了解再来总结。