CSS text width adaptive, width, fit, content

---

renderings

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;

---

analyze

Maybe you want to say, why not add display: inline-block;or to the parent element display: inline;? At this point the same parent element already exists display: flex;, so no displayother attributes can be set. The solution is to add another child element inside the parent element, let the child element wrap the icon and content, and make the child element an inline element. But this does not solve the problem fundamentally, because the parent element is still covered with the entire line, so the css has an adaptive content width property width: fit-content;.

---

width

definition

widthattribute is used to set the width of the element. widthSets the width of the content area by default, but sets the width of the border area instead if box-sizingthe property is set to . and properties take precedence over . , , and . A length or percentage value .border-box
min-widthmax-widthwidth
min-contentmax-contentfit-contentauto
lengthpercentage

value

lengthDefine the width using an absolute value.
percentageDefines the width as a percentage of the containing block width of the outer element the containing block's width.
autoThe browser will calculate and choose a width for the specified element.
max-contentThe proper width inherent to the element's content intrinsic.
min-contentThe intrinsic minimum width of the element's content.
fit-contentTakes the greater of two values,
the intrinsic minimum width, the lesser of
the intrinsic preferred width max-content, and the available width , expressed asavailable
min(max-content, max(min-content, <length-percentage>))