文字只显示若干行，多出部分省略号显示。

最新推荐文章于 2025-05-16 09:48:22 发布

Tomhs3000

最新推荐文章于 2025-05-16 09:48:22 发布

阅读量4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css 省略号 ellipsis

本文链接：https://blog.youkuaiyun.com/Tomhs3000/article/details/78392824

css 专栏收录该内容

10 篇文章

订阅专栏

mark一个文字多出部分省略号显示的方法

一、如果只有一行可以使用如下方法

<style>
#test{
    width: 100px; 
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis;
    -o-text-overflow：ellipsis;
}
</style>

width是必须属性（不然哪里知道一行有多长...）

white-space：nowrap的意思是不换行，另外该属性还有可能的值normal，pre，pre-wrap，pre-line，inherit

text-overflow：ellipsis的意思为使用省略号代替修剪的文本，另外该属性还有可能的值clip,string

支持低版本的opera一个办法，就是-o-text-overflow：ellipsis

ps:该方法只能支持超过一行时候显示省略号

二、多行文本时，末尾显示省略号

<style>
.vipText{
    height: .2rem;
    width: .97rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient: vertical;
}
</style>

要显示几行就把-webkit-line-clamp:1;后面的值改成几就行，此处需要注意的是高度和宽度是必须的值。

另外该方法对于火狐浏览器并不支持....可以考虑在火狐中就使用overflow:hidden...省略号什么的好像也没那么重要嘛~