css 解决方案-单行省略号

最新推荐文章于 2025-06-24 09:47:52 发布

编程之上

最新推荐文章于 2025-06-24 09:47:52 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： css&css3

本文链接：https://blog.youkuaiyun.com/ruizhengyun/article/details/8834180

css&css3 专栏收录该内容

30 篇文章

订阅专栏

本文介绍如何使用CSS实现单行文字溢出时显示省略号的效果，并提供了兼容不同浏览器的代码示例及演示。

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

核心css代码
firefox从7.0开始兼容text-overflow:ellipsis;这样的话，以后单行的省略号就可以不借助后台程序或者js来做到浏览器兼容了，其核心代码为：

selector{
    -o-text-overflow: ellipsis;  /*兼容opera*/
    text-overflow: ellipsis;     /*这就是省略号喽*/          
    overflow: hidden;            /*设置超过的隐藏*/
    white-space: nowrap;         /*设置不折行*/
    width:200px;                 /*设置宽度*/
}

demo 1

HTML code

<pre name="code" class="html"><span style="font-size:14px;"><ul id="demo1">
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
   <li>Vestibulum auctor dapibus.</li>
</ul></span>

CSS code

#demo1 li{
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;          
    overflow: hidden;
    white-space: nowrap;
    width:250px;
    margin-left:12px;
    list-style:disc inside none;    
}

注：因为设置了li的overflow为hidden，所以如果要设置其list-style，则需要设置为inside，而不是outside，不然将会看不见你设置的list-style效果

demo 2

HTML code

<ul id="demo2" class="nostyle clearfix">
   <li><a href="#"><img src="http://placehold.it/100/e3e3e3/00c5e3&text=demo" alt="img1"><strong>单行省略号纯css解决方案</strong></a></li>
   <li><a href="#"><img src="http://placehold.it/100/e3e3e3/00c5e3&text=demo" alt="img2"><strong>ie6 png解决方案</strong></a></li>
   <li><a href="#"><img src="http://placehold.it/100/e3e3e3/00c5e3&text=demo" alt="img3"><strong>图文混排解决方案</strong></a></li>
</ul>

CSS code

#demo2 li{
    width:104px;
    float:left;
    margin-right:20px;
    display:inline;
}
#demo2 img{
    padding:2px;
    border:1px solid #ccc;
}
#demo2 strong{
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;          
    overflow: hidden;
    white-space: nowrap;
    width:104px;
    display:block;
}

注：请注意不要在行内元素里面使用块级元素，如这个demo我们使用strong作为标题的标签而不是h或者p，css代码部分没有贴出nostyle和clearfix的class代码，请使用firebug查看