【CSS】文字截断

文字截断

瞎扯

文字太长,有时候需要截断掉一部分,剩下的用... 来补充. 早期的时候,可以用JS来实现,判断文字长度,太长就截断,然后补充...

当然CSS也是同样可以实现的,并且CSS实现起来更加简单粗暴.

text-overflow 兼容性 IE6+, Firefox7+, Chrome13+, safari5.1 主流浏览器都支持.

.text-overflow {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    /* IE/Safari */
    -o-text-overflow: ellipsis;
    /* Opera */
    -moz-binding: url("ellipsis.xml#ellipsis");
    /*FireFox*/
  }

在线DEMO

http://www.w3chtml.com/css3/properties/text/text-overflow.html