使用text-overflow:ellipsis实现溢出文本省略号显示无需js

ttx9n · 发表于 2014-1-26 17:32:56

碰到一个实现溢出文本显示省略号的需求，使用js截取字符串然后判断字符串长度实现，不过相对比较繁琐，本文为大家介绍下使用 text-overflow: ellipsis 实现溢出文本省略号显示今天在做jsp页面展示的时候碰到一个实现溢出文本显示省略号的需求

原本使用js截取字符串然后判断字符串长度实现，不过相对比较繁琐，并且字符串长度不能自适应

听说用css的 text-overflow: ellipsis 也可以实现，于是尝试了下。

发现除了设置 text-overflow 属性为 ellipsis 外

还需要设置 white-space 属性为 nowrap （限制不换行）

和 overflow 属性为 hidden （隐藏溢出）

即设置样式 style="text-overflow:ellipsis; white-space: nowrap; overflow: hidden;" 后测试成功

相比js方式不仅简便了许多而且会根据元素的宽度自适应

IE 8+，chrome 30，火狐26，测试通过

qwe520 · 发表于 2022-8-27 18:30:22

加快速度很快就撒谎

pwseqn1h · 发表于 2022-9-16 17:14:02

谢谢分享，先下来用用

locopy · 发表于 2022-10-7 11:42:51

刷刷刷刷刷刷刷刷刷刷刷刷刷刷刷

x20yd3qx · 发表于 2023-2-6 21:41:14

我找了挺久终于找到了

rveqwdpw5 · 发表于 2023-8-4 08:42:05

老衲笑纳了

5cf304mn2 · 发表于 2023-9-9 23:34:34

先把创新班才能下班才能下班

nwk53kbd · 发表于 2023-9-12 06:42:09

2222222222222222

64000928 · 发表于 2024-4-7 14:45:25

有什么好的服务器

a75620618 · 发表于 2024-4-28 22:34:35

啦啦啦啦啦啦啦啦！

账号		自动登录	找回密码
密码			立即注册

[CSS] 使用text-overflow:ellipsis实现溢出文本省略号显示无需js

相关帖子