CSS实现单行文本溢出显示省略号(…)

小王先森
小王先森
小王先森
326
文章
310
评论
2020年2月7日09:42:27 评论 67 297字阅读0分59秒

实现单行文本的溢出显示省略号用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。

实现方法:

width: 300px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

例如:

<li style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">9999999999999999999999999999999</li>

效果:

CSS实现单行文本溢出显示省略号(…)

实现多行的方法,请移步>>CSS实现单行、多行文本溢出显示省略号(…)

小王先森
  • 本文由 发表于 2020年2月7日09:42:27
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: