溢出文本省略

最新推荐文章于 2025-08-12 17:22:56 发布

michaelia530

最新推荐文章于 2025-08-12 17:22:56 发布

阅读量357

点赞数

CC 4.0 BY-SA版权

文章标签：体育 safari firefox url webkit opera

本文链接：https://blog.youkuaiyun.com/michaelia530/article/details/7054079

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

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