正常情况下,比如一个div里有多个元素时,当宽度较小时会自动换行,如果超过宽度,就会自动换行,但是如果想实现不换行,就要用到一个属性,下面具体看下。
首先我们看一个例子,一个换行的例子,代码如下:
<div> <span style="width:500px;display:inline-block;background:red;">red</span> <span style="width:500px;display:inline-block;background:green;">green</span> <span style="width:500px;display:inline-block;background:blue;">blue</span> </div>
目前的效果如下:
redgreenblue
然后,我们改下代码,增加一个css属性:white-space:nowrap
;
<div style="white-space:nowrap;"> <span style="width:500px;display:inline-block;background:red;white-space:nowrap;">red</span> <span style="width:500px;display:inline-block;background:green;white-space:nowrap;">green</span> <span style="width:500px;display:inline-block;background:blue;white-space:nowrap;">blue</span> </div>
更改后的效果如下:
redgreenblue
可以看到,实现了不换行的目的,其实就是空白符不换行。