提示：您可以先修改部分代碼再運行
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style type="text/css">* {margin:0;padding:0;}#news {margin-top:100px;margin-left:100px;list-style:none;width:156px; /*這個寬度可以深究一下，它是不包含日期長度的*/}#news:after {content:'';display:block;clear:both;height:0px;}#news li {clear:both; /*清除li中的浮動*/}#news li a {float:left; /*標題向左浮動*/color:#333;text-decoration:none;font-size:13px;max-width:156px; /*給標準瀏覽器一個最大寬度*/height:24px;white-space:nowrap !important; /*強制文字不換行(標準瀏覽器)*/white-space:normal; /*溢出的時候文字換行，並配合上面的固定高度，對文字進行裁切*/overflow:hidden;text-overflow:ellipsis; /*截斷文字，顯示省略符號(...)*/-o-text-overflow:ellipsis; /*Opera的專用截斷文字的屬性*/background:none; /*解決IE6的莫名高度BUG，試試在IE6下去掉這個屬性*/}#news li a:hover {color:#000;text-decoration:underline;}#news li span {float:left; color:#666;padding-left:10px;margin-right:-99px; _position:relative; }</style><title>純CSS的方法解決文字溢出與截斷的問題</title></head><body><ul id="news"> <li>溢出的<span>2012-05-30</span></li> <li>溢出的時候<span>2012-05-31</span></li> <li>溢出的時候文字<span>2012-06-01</span></li> <li>溢出的時候文字換行<span>2012-06-02</span></li> <li>溢出的時候文字換行並配<span>2012-06-03</span></li> <li>溢出的時候文字換行並配合上<span>2012-06-04</span></li> <li>溢出的時候文字換行並配合上面的<span>2012-06-05</span></li> <li>溢出的時候文字換行並配合上面的固定<span>2012-06-06</span></li> <li>溢出的時候文字換行並配合上面的固定高度<span>2012-06-07</span></li></ul></body></html></td> </tr></table>
提示：您可以先修改部分代碼再運行
