white-space: nowrap 属性实现禁止文字自动换行

在网站设计过程中,往往需要设置数据只在一行里显示,但调用数据的时候,当没有为数据设定固定的长度的话,无论是IE还是firefox，到达边界都会自动换行(就算是设置了,但又会有英文和中文的字数区别,字数限制的个数又会是一个让你头痛或需要取舍的问题)。

哪有什么更好的解决办法呢?其实可以用CSS 的 white-space: nowrap 来解决这个问题。使用这个css属性之后，文本只有在遇到空格或者是换行符的时候才能换行。

比如：div{white-space: nowrap;}

<style type="text/css">            
  
  div{width:300px;border:1px solid red;margin:10px;overflow:hidden;}              
  .nowrap{white-space: nowrap;}     
         
</style> 
<div class="nowrap">
这是一段很长的文字中间没有空格也没有换行它不会自动换行直到被截取掉<br />
</div>
<div>这是一段很长的文字中间没有空格也没有换行但它会自动换行<br /></div>
上面两个div里超宽的文字，第一个里面的被禁止换行，然后超宽的被截取了；第二个不做设置，于是自动换行了。

定义

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

这个属性声明建立布局过程中如何处理元素中的空白符。值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的。

继承性：Yes

JavaScript 语法

CSS 属性也可通过一段 JavaScript 被动态地改变。

脚本语法：

object.style.whiteSpace="nowrap"