在信息列表结构中，常常会遇到栏目的宽度固定但信息项的字符过长的矛盾，为了避免超长字符的信息项破坏栏目的布局，设计师经常需要考虑限制栏目信息的显示长度，如设置当信息项字符超出长度时则省略显示。下面的方法就能帮助设计师们解决这个问题：
<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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
