css之文字宽度自适应、width、fit、content

---

效果图

html

<div>
    <div class="width_600">
        <div class="d_f ai_c bc_1296db padding_7 radius_8 cursor_pointer" style="width: fit-content;">
            <img class="width_26 height_26" src="../image/menu.png" alt="图片加载失败">

            <div class="margin_l_10 font_size_18 color_fff">菜单一</div>
        </div>

        <div class="margin_t_16 font_size_20" style="text-indent: 40px;">
            元丰六年十月十二日夜，解衣欲睡，月色入户，欣然起行。念无与为乐者，遂至承天寺寻张怀民。怀民亦未寝，相与步于中庭。庭下如积水空明，水中藻、荇交横，盖竹柏影也。何夜无月？何处无竹柏？但少闲人如吾两人者耳。
        </div>
    </div>

    <div class="width_600 margin_t_20">
        <div class="d_f ai_c bc_1296db padding_7 radius_8 cursor_pointer" style="width: fit-content;">
            <img class="width_26 height_26" src="../image/menu.png" alt="图片加载失败">

            <div class="margin_l_10 font_size_18 color_fff">菜单二会长一点咯</div>
        </div>

        <div class="margin_t_16 font_size_20" style="text-indent: 40px;">
            山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。苔痕上阶绿，草色入帘青。谈笑有鸿儒，往来无白丁。可以调素琴，阅金经。无丝竹之乱耳，无案牍之劳形。南阳诸葛庐，西蜀子云亭。孔子云：何陋之有？
        </div>
    </div>
</div>

---

css

width: fit-content;

/* <length> values */
width: 300px;
width: 25em;

/* <percentage> value */
width: 75%;

/* Keyword values */
width: max-content;
width: min-content;
width: fit-content(20em);
width: auto;

/* Global values */
width: inherit;
width: initial;
width: unset;

---

解析

可能你想说，那为什么不给父元素加上display: inline-block;或display: inline;呢？此时同一个父元素已经存在display: flex;了，所以无法再设置display的其他属性了。解决办法是可以在父元素里面再一个子元素，让子元素把图标和内容包裹起来，在让子元素变为行内元素。但是这样的话没有根本上解决问题，因为父元素依然沾满了整行，所以css出了内容宽度自适应属性width: fit-content;。

---

width

定义

width属性用于设置元素的宽度。width默认设置内容区域的宽度，但如果box-sizing属性被设置为border-box，就转而设置边框区域的宽度。
min-width和max-width属性的优先级高于width。
min-content、max-content、fit-content和auto。
一个长度值length或者百分比值percentage。

值

length使用绝对值定义宽度。
percentage使用外层元素的容纳区块宽度the containing block's width的百分比定义宽度。
auto浏览器将会为指定的元素计算并选择一个宽度。
max-content元素内容固有的intrinsic合适宽度。
min-content元素内容固有的最小宽度。
fit-content取以下两种值中的较大值
固有的最小宽度
固有首选宽度max-content和可用宽度available两者中的较小值
可表示为min(max-content, max(min-content, <length-percentage>))