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