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