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

 

 

 

 

评论

1 楼 yzq21056563 2017-12-17  

感谢作者分享~

请教下，web前端中文站里的 http://www.lisa33xiaoq.net/?p=919

flex-wrap目前支持的浏览器内核版本是哪个以上？超出隐藏显示忽略是怎么解决？