有些时候我们在使用CSS+DIV进行排版实现大量的文字的时候，为了页面的美观，这里需要将文字在div中一行显示，并且将过多的文字进行隐藏，以点号进行代替。当鼠标放上面的时候会以title的形式显示所有的内容。
如下图所示为使用样式排版之前的效果：
如下图所示为使用样式排版之后的效果：
明显下面的效果图要比之前友好实用多了。
如下为源码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns=""><head> <title></title> <script src="../JavaScript/jquery-1.8.3.min.js" type="text/javascript"></script> <style type="text/css"> #test { width: 530px; height: 500px; background-color: Blue; } .content { width: 100px; background-color: Gray; float: left; border: 1px solid red; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style> <script type="text/javascript"> </script></head><body> <center> <div id="test"> <div class="content" title="测试测试测试测试测试测试测试"> <input type="radio" /><span>测试测试测试测试测试测试测试</span> </div> <div class="content" title="测试测试测试测试测试测试测试"> <input type="radio" /><span>测试测试测试测试测试测试测试</span> </div> <div class="content" title="测试测试测试测试测试测试测试"> <input type="radio" /><span>测试测试测试测试测试测试测试</span> </div> <div class="content" title="测试测试测试测试测试测试测试"> <input type="radio" /><span>测试测试测试测试测试测试测试</span> </div> <div class="content" title="测试测试测试测试测试测试测试"> <input type="radio" /><span>测试测试测试测试测试测试测试</span> </div> <div class="content" title="测试测试测试测试测试测试测试"> <input type="radio" /><span>测试测试测试测试测试测试测试</span> </div> <div class="content" title="测试测试测试测试测试测试测试"> <input type="radio" /><span>测试测试测试测试测试测试测试</span> </div> </div> </center></body></html>对以上源码的部分解释
css中white-space:nowrap主要是控制文字能够在div中一样显示，不换行，overflow：hidden和text-overflow:ellipsis则是对于过多的文字进行隐藏并且将多余的文字以点号进行代替。这里鼠标放在div上的时候能够显示所有的文字，主要是通过div的title属性进行实现的。