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

avatar
avatar
小王先森
389
文章
383
评论
2020年2月7日 1 397

实现单行文本的溢出显示省略号用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实现单行、多行文本溢出显示省略号(…)

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

发表评论

匿名网友 填写信息

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

评论:1   其中:访客  1   博主  0
    • avatar 趣绘动漫 0

      不错 我刚好需要谢谢