多行文字溢出[.]的兑现(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?来详细了解.

?

?

?

?