有些時候我們在使用CSS+DIV進行排版實現大量的文字的時候，為了頁面的美觀，這里需要將文字在div中一行顯示，並且將過多的文字進行隱藏，以點號進行代替。當鼠標放上面的時候會以title的形式顯示所有的內容。
如下圖所示為使用樣式排版之前的效果：
如下圖所示為使用樣式排版之后的效果：
明顯下面的效果圖要比之前友好實用多了。
如下為源碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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屬性進行實現的。