Amazing text-overflow

限制字符串的长度是一个很常见的需求,我的习惯一般都是用rubytruncate方法直接在服务器端就处理了,但其实字符串处理这种工作应该交给页面视觉,也就是前端去做。

所以用了AngularJS之后就写了个truncatefilter去做这件事,这也是符合AngularJS的哲学的。

但是HTML与CSS分离的习惯告诉我,最理想的方法应该是用CSS去处理这件事情,后来终于找到了这个神奇的text-overflow,以后就这样写好了:

.truncate
{
    width:200px;
    white-space:nowrap;
    word-break:keep-all;
    overflow:hidden;
    text-overflow:ellipsis;
}

Useful Links: