[小知识]如何用css实现文本溢出变成省略号效果

Posted 2021-04-09 UI设计自学平台

微信关注「网页设计自学平台」

                     

我们平时写代码的时候，段落文字都是用p标签

如图所示，如果我们给div设置了宽高之后

文字如果超过了div的范围直接就溢出了

这肯定不是我们想要的效果

直接把溢出的文本隐藏掉也不是个好的方法

毕竟，客户不会知道这里的文字隐藏了

如果这里能显示的是省略号

那么客户会有点击进去了解的欲望

我们如何实现溢出的文本后面形成省略号的效果呢？

这里需要给p 标签样式里加上三个css属性即可

首先给p 标签样式添加white-space: nowrap属性

使溢出的文本在一行显示

这样可以使之不换行，不过仍然会溢出

接下来把超出的文本进行隐藏

添加overflow: hidden属性

使得超出部分的文本隐藏起来

最后也是最关键的一步

给p 标签添加属性

text-overflow: ellipsis

搞定

超出的文本从隐藏不显示的状态变成了末尾省略号的形式

留个小思考题

目前实现的是单行文本溢出添加了省略号

多行文本溢出又该怎么办呢

一套完整的网站视频教程

一周自己完整的制作出一个网站

戳“阅读原文”入群免费领取前端开发教程！