我们在实际应用中，经常会遇到标题太长而将布局打乱的情行，面对这个问题，我们要做的要么是截断，要么隐藏超出的部分，今天我介绍一下用CSS来解决这个问题，超出部分用省略号代替，下面看css样式代码：

 
  
  1. <style type="text/css">  
  2.   ul {width:200px; margin:50px auto;}  
  3.   li {
  4.  width:200px; line-height:25px; 
  5.  text-overflow:ellipsis; 
  6.  white-space:nowrap; 
  7.  overflow:hidden;
  8.  }/*这是关键代码，其它的都是次要的，为了显示用*/ 
  9.   a {color:#03c; font-size:13px;}  
  10.   a:hover {color:#000;}  
  11. </style> 
 
  
下面是HTML代码：
 
  
 
  
  1. <ul> 
  2. <li><a href="http://www.qiandabao.com/cxrs/841.html" title="设置段落与段落的间距">设置段落与段落的间距</a></li> 
  3. <li><a href="http://www.qiandabao.com/wdgz/840.html" title="新的周一又开始了">新的周一又开始了</a></li> 
  4. <li><a href="http://www.qiandabao.com/wdgz/839.html" title="今天工作比较累">今天工作比较累</a></li> 
  5. <li><a href="http://www.qiandabao.com/wdgz/838.html" title="51yes统计经常出问题">51yes统计经常出问题</a></li> 
  6. <li><a href="http://www.qiandabao.com/html5/837.html" title="按字母顺序排列的标签列表">按字母顺序排列的标签列表</a></li> 
  7. <li><a href="http://www.qiandabao.com/html5/836.html" title="Next PageHTML5 的新的表单属性">Next PageHTML5 的新的表单属性</a></li> 
  8. <li><a href="http://www.qiandabao.com/wdgz/835.html" title="2008年国外最漂亮的50个网站欣赏">2008年国外最漂亮的50个网站欣赏</a></li> 
  9. </ul> 
 
  
转自：http://www.qiandabao.com/cxrs/842.html