溢出文本省略

在信息列表结构中,常常会遇到栏目的宽度固定但信息项的字符过长的矛盾,为了避免超长字符的信息项破坏栏目的布局,设计师经常需要考虑限制栏目信息的显示长度,如设置当信息项字符超出长度时则省略显示。下面的方法就能帮助设计师们解决这个问题:

<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>



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章