CSS / 前端 / 日记 · 2014 年 9 月 19 日 1

文字溢出 text-overflow:ellipsis

文字溢出是常碰到的情境,div(或其他标签)太长多余的文字被截掉然后用…替代,最简单的办法是使用CSS属性text-overflow:ellipsis,之前碍于Firefox不支持此属性,不得不用其他办法来兼容,如今所有浏览器已经支持此属性,在此Mark一下。

示例:

CSS方法就可以实现所有主流浏览器对于文字溢出用省略号表示

.textOverflowExample{
   width:20em;
   overflow:hidden;
   text-overflow:ellipsis;
   white-space:nowrap;
}