多个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="">beijinga><a href="">shanghaia><a href="">tianjina><a href="">123456a><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 你好 WelcomeToChinaWelcomeToBeiJingp>
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 你好 WelcomeToChinaWelcomeToBeiJingp>
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="">11111a><a href="">222222a><a href="">cccccca><a href="">da><a href="">eeeeea> 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="">11111a><a href="">222222a><a href="">cccccca><a href="">da><a href="">eeeeea>
9 div>

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