CSS3 width:max-content对比测试实例页面

回到相关文章 »

代码:

CSS代码:
.box {
    background-color: #f0f3f9;
    padding: 10px;
    margin: 10px auto 20px;
    overflow: hidden;
}

.inline-block {
    display: inline-block;
}
.max-content {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;    
}
                
HTML代码:
<strong>display:inline-block;</strong>
<div class="box inline-block">
    <img src="mm1.jpg">
    <p>display:inline-block具有收缩特性,但是,当(例如这里的)描述文字超过一行显示的时候,其会这行,不会让自身的宽度超过父级容器的可用空间的,但是,width:max-content就不是酱样子哦咯!表现得好像设置了white-space:nowrap一样,科科!</p>
</div>

<strong>width: max-content;</strong>
<div class="box max-content">
    <img src="mm1.jpg">
    <p>display:inline-block具有收缩特性,但是,当(例如这里的)描述文字超过一行显示的时候,其会这行,不会让自身的宽度超过父级容器的可用空间的,但是,width:max-content就不是酱样子哦咯!表现得好像设置了white-space:nowrap一样,科科!</p>
</div>
                

效果:

display:inline-block;

display:inline-block具有收缩特性,但是,当(例如这里的)描述文字超过一行显示的时候,其会这行,不会让自身的宽度超过父级容器的可用空间的,但是,width:max-content就不知酱样子哦咯!表现得好像设置了white-space:nowrap一样,科科!

width: max-content;

display:inline-block具有收缩特性,但是,当(例如这里的)描述文字超过一行显示的时候,其会这行,不会让自身的宽度超过父级容器的可用空间的,但是,width:max-content就不知酱样子哦咯!表现得好像设置了white-space:nowrap一样,科科!