多个inline元素、block元素、inline-block元素在父容器中的换行情况

2022-12-08 08:49:27

1、首先看inine元素的换行情况

 <style>

     *{padding:0;margin:0}

     div.wrap{width:200px;height:200px;border:1px solid #ccc;margin:10px;}

     .inline-element a{margin:0 5px 0 0;padding:0 5px 0 0;height:20px;line-height:20px;background:#ccc;}

 </style>

 <div class="wrap">

     <span class="inline-element"><a href="">北京</a><a href="">上海</a><a href="">天津</a><a href="">辽宁</a><a href="">吉林</a><a href="">黑龙江</a></span>

 </div>

 <div class="wrap">

     <span class="inline-element"><a href="">beijing</a><a href="">shanghai</a><a href="">tianjin</a><a href="">123456</a><a href="">jiling </a></span>

 </div>

显示情况：

多个inline元素在父容器内表现：汉字会折断换行；字母数字不换行，浏览器默认设置下会溢出父元素

如果想让字母、数字进行换行显示，有两种设置方法，第一种是在父包含元素设置 word-break: break-all，另外一种是：word-wrap：break-word；

这两种都有可能会打破元素的连续性，进行破坏性换行。

word-break: break-all的情况：过长的词语“WelcomeToChinaWelcomeToBeiJing”本行显示不下的情况下，折断词语进行显示。可最少占用空间

 .wrap-inline{width:200px;height:200px;border:1px solid red;margin:10px;word-break:break-all}

 <div class="wrap-inline">

     <p>123456 你好 WelcomeToChinaWelcomeToBeiJing</p>

 </div>

word-wrap:break-word的情况：可以看出，过长的单词“WelcomeToChinaWelcomeToBeiJing”在本行显示不下的情况下，会重新起一行开始显示

1 .wrap-inline{width:200px;height:200px;border:1px solid red;margin:10px;word-wrap:break-word;}

2

3 <div class="wrap-inline">

4     <p>123456 你好 WelcomeToChinaWelcomeToBeiJing</p>

5 </div>

下面这篇文章有助于理解你真的了解word-wrap和word-break的区别吗？

2、多个block元素的换行情况：汉字、字母、数字都独占一行

.wrap-block{width:200px;height:200px;border:1px solid red;margin:10px;}

.wrap-block a{margin:0 5px 0 0;padding:0 5px 0 0;height:20px;line-height:20px;background:#ccc;display:block;}

<div class="wrap-block"> <a href="">内蒙古</a><a href="">青岛</a><a href="">青岛</a><a href="">青岛</a><a href="">内蒙古</a> </div> <div class="wrap-block"> <a href="">11111</a><a href="">222222</a><a href="">cccccc</a><a href="">d</a><a href="">eeeee</a> </div>

3、inline-block元素情况：不论是中文、数字、单词词组都会完整显示，完美，推荐使用inline-block设置类似的场景。

     .wrap-inline-block{width:200px;height:200px;border:1px solid red;margin:10px;}

     .wrap-inline-block a{margin:0 10px;height:20px;line-height:20px;background:#ccc;display:inline-block;}

 <div class="wrap-inline-block"><a href="">内蒙古</a><a href="">青岛</a><a href="">青岛</a><a href="">内蒙古</a><a

         href="">内蒙古</a>

 </div>

 <div class="wrap-inline-block">

     <a href="">11111</a><a href="">222222</a><a href="">cccccc</a><a href="">d</a><a href="">eeeee</a>

 </div>

使用场景：下方的城市列表，可以设置子元素为inline-block，就可以实现完美换行了。

码农公寓

相关文章