兼容所有浏览器的省略号--纯CSS策略

weixin_30788731

于 2009-06-01 19:38:00 发布

阅读量83

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/fdszlzl/archive/2009/06/01/1493970.html

本文介绍了一种使用CSS实现文本溢出时自动省略显示的方法。通过设置display、width、white-space、overflow及text-overflow等属性，可以使超出部分的文字以省略号形式展示，适用于网页中对长文本进行合理布局的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码:

< style >
div a {
display : block ; /* 必须 */
Width : 310px ; /* 必须 */
white-space : nowrap ; /* 必须 */
overflow : hidden ; /* 必须 */
float : left ; /* 必须 */
    text-overflow : ellipsis ;          /* for IE */
    -o-text-overflow : ellipsis ;      /* for Opera safari chrome */
}
/* for Firefox */
div:after {
    content : "

" ;
padding-left : 3px ;
font-size : 12px ;
}
</ style >
< body >
< div >
< a href ="ddd" > 我的同志我的同志我的同志我的同志我的同志我的同志我的同志我的同志我的同志我的同志我的同志我的同志我的同志我的同志我的同志我的同志 </ a >
</ div >
</ body >

示例:

我的同志我的同志我的同志我的同志我的同志我的同志我的同志我的同志我的同志我的同志我的同志我的同志我的同志我的同志我的同志我的同志

转载于:https://www.cnblogs.com/fdszlzl/archive/2009/06/01/1493970.html