多行文字溢出[.]的兑现(text-overflow: ellipsis)

多行文字溢出[...]的实现(text-overflow: ellipsis)

?

对于单行文字, 很简单.

?

.oneLine {    width: 200px;    overflow: hidden;    white-space: nowrap;    text-overflow: ellipsis;}

?

对于多行文字, 上面的代码就不适用了. web-kit based 的浏览器提供了对这个特殊需求的支持.

?

.twoLine {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}

你只要调整-webkit-line-clamp的值就能实现在第n行[...].

?

对于其他内核的浏览器就只能用javascript来hack了.

?

Vimeo的Joe已经实现了这一功能, 可以参考?https://github.com/josephschmitt/Clamp.js?来详细了解.

?

?

?

?