在信息列表結構中，常常會遇到欄目的寬度固定但信息項的字符過長的矛盾，爲了避免超長字符的信息項破壞欄目的佈局，設計師經常需要考慮限制欄目信息的顯示長度，如設置當信息項字符超出長度時則省略顯示。下面的方法就能幫助設計師們解決這個問題：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>text-overflow</title>
<style type="text/css">
dl{ width:240px; border:1px solid #ccc;}
dt{ padding:8px 8px; background:url(../images/btn_center.jpg) repeat-x; font-size:13px; text-align:left; font-weight:bold; color:#71790c; margin-bottom:12px; border-bottom:solid 1px #efefef;}
dd{ font-size:0.78em;
height:1.5em;
width:220px;
padding:2px 2px 2px 18px;
background:url(../images/jiantou.gif) no-repeat left 25%;
margin:2px 0; white-space:nowrap;/*禁止換行*/
overflow:hidden;/*禁止文本溢出顯示*/
-o-text-overflow:ellipsis; /*兼容Opera*/
text-overflow:ellipsis;/*兼容IE、Safari（Webkit）*/
-moz-binding:url('ellipsis');/*兼容Firefox*/
}
</style>
</head>
<body>
<dl>
<dt>體育新聞</dt>
<dd>體育新聞體育新聞體育新聞體育新聞體育新聞體育新聞</dd>
<dd>體育新聞體育新聞體育育新聞體育新聞</dd>
<dd>體育新聞體育新聞體育新聞體育新聞體育新聞體育新聞</dd>
<dd>體育新聞體育新聞體育新聞體育新聞體育新聞</dd>
<dd>體育新聞體育新聞體育新聞體育新聞育新聞體育新聞</dd>
<dd>體育新聞體育新聞體育新聞體育體育新聞體育新聞</dd>
</dl>
</body>
</html>