white-space:nowrap实现不断行（非常实用的东东）

white-space 属性设置如何处理元素内的空白

这个属性声明建立布局过程中如何处理元素中的空白符

默认值： normal
     JavaScript 语法： object.style.whiteSpace="pre"
例
规定段落中的文本不进行换行：
p
  {
  white-space: nowrap
  }

值：

normal 默认。空白会被浏览器忽略。
pre 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre-wrap 保留空白符序列，但是正常地进行换行。
pre-line 合并空白符序列，但是保留换行符。
inherit 规定应该从父元素继承 white-space 属性的值

参考：http://www.w3school.com.cn/css/pr_text_white-space.asp

 

span里的元素在被定义了 display:inline-block; 这个属性之后，就再也不会被断行了，也不会把外层的 div 撑开（除非span比div还要宽了），这样就达到了和英文单词一样的标签云效果了，

<style type="text/css">

<!--

body{font-size:12px; color:#fff;}

div{width:110px; background:#000;}

span{padding:10px;white-space:nowrap;}

-->

</style>

<div>

<span>标</span>

<span>标fdsfsdfdsfdsfsdf</span>

<span>标</span>

</div>

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

此例中，li宽度不够时自动换行，而未加white-space:nowrap时，页面将会变形

<style type="text/css">
<!--
*{padding:0px;margin:0px;}
body{font-size:12px; color:#fff;}
div{width:200px; background:#000;}
ul,li{list-style:none;}
li{padding:10px;float:left;white-space:nowrap;}
a{color:#fff;}
-->
</style>
<div>
<ul>
 <li><a href="#">里的元素</a></li>
 <li><a href="#">里的元素</a></li>
 <li><a href="#">里</a></li>
 <li><a href="#">里的元素在被定义达到</a></li>
 <li><a href="#">里的元素在被定义达到</a></li>
 <li><a href="#">里的元素在被定义达到</a></li>
 <li><a href="#">里的元素在被定义达到</a></li>
 <li><a href="#">里的元素在被定义达到</a></li>
 <li><a href="#">里的元素在被定义达到</a></li>
</ul>
</div>

 

 

<li rel="1" style="white-space: nowrap">