CSS文本溢出显示省略号

钟小湖

October 30, 2020

364views

2 comments

436 words

代码生涯前端那些事

<div class="tip share">请注意，本文编写于 127 天前，最后修改于 127 天前，其中某些信息可能已经过时。</div>

## 单行文本

实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加**宽度width**属来兼容部分浏览。

实现方法：

```
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
```

效果如图：
![](https://cdn.xn2001.com/img/2020/20201030212132.png)

## 多行文本

实现方法：

```
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
```

效果如图：

![](https://cdn.xn2001.com/img/2020/20201030212203.png)

<hr class="content-copyright" style="margin-top:50px" /><blockquote class="content-copyright" style="font-style:normal"><p class="content-copyright">版权属于：乐心湖's Blog</p><p class="content-copyright">本文链接：<a class="content-copyright" href="https://www.xn2001.com/archives/602.html">https://www.xn2001.com/archives/602.html</a></p><p class="content-copyright">声明：博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" target="_blank" rel="nofollow noopener noopener" one-link-mark="yes">CC BY-SA 4.0 协议</a> ，转载请注明出处！</p></blockquote>

腾讯云社区邀请各位技术博主加入，福利多多噢！

Last modification：October 30th, 2020 at 09:23 pm

如果觉得我的文章对你有用，请随意赞赏