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

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

 1 <style>
 2     *{padding:0;margin:0}
 3     div.wrap{width:200px;height:200px;border:1px solid #ccc;margin:10px;}
 4     .inline-element a{margin:0 5px 0 0;padding:0 5px 0 0;height:20px;line-height:20px;background:#ccc;}
 5 
 6 </style>
 7 
 8 <div class="wrap">
 9     <span class="inline-element"><a href="">北京</a><a href="">上海</a><a href="">天津</a><a href="">辽宁</a><a href="">吉林</a><a href="">黑龙江</a></span>
10 </div>
11 <div class="wrap">
12     <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>
13 </div>

显示情况：

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

 

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

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

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

1 .wrap-inline{width:200px;height:200px;border:1px solid red;margin:10px;word-break:break-all}
2 
3 <div class="wrap-inline">
4     <p>123456 你好 WelcomeToChinaWelcomeToBeiJing</p>
5 </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设置类似的场景。

1     .wrap-inline-block{width:200px;height:200px;border:1px solid red;margin:10px;}
2     .wrap-inline-block a{margin:0 10px;height:20px;line-height:20px;background:#ccc;display:inline-block;}
3 
4 <div class="wrap-inline-block"><a href="">内蒙古</a><a href="">青岛</a><a href="">青岛</a><a href="">内蒙古</a><a
5         href="">内蒙古</a>
6 </div>
7 <div class="wrap-inline-block">
8     <a href="">11111</a><a href="">222222</a><a href="">cccccc</a><a href="">d</a><a href="">eeeee</a>
9 </div>

 

 

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

 

转载于:https://www.cnblogs.com/shenfangfang/p/5703010.html