多个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，就可以实现完美换行了。
