您的浏览器过于古老 & 陈旧。为了更好的访问体验, 请 升级你的浏览器
不吃猫的鱼 发布于2019年06月03日 11:46

如何使用CSS控制超过一行自动显示省略号?

3997 次浏览 读完需要≈ 1 分钟 CSS

在设置标题或者内容介绍时候,总有超过限制的长度,如何使用css3来控制缩略?

1 个回答

一纸荒年 · 4年前

单行缩略:

<style>
.overflow {
	width: 300px;
	overflow: hidden;/*超出部分隐藏*/
	text-overflow: ellipsis;/*超出部分文字以...显示*/
	display: -webkit-box;
	white-space: nowrap;/*不换行*/
	/*! autoprefixer: off */
	-webkit-box-orient: vertical;
}
</style>

多行缩略:

<style>
.overflow {
	width: 300px;
	overflow: hidden;/*超出部分隐藏*/
	text-overflow: ellipsis;/*超出部分文字以...显示*/
	display: -webkit-box;
	-webkit-line-clamp: 3;/*限制行数,如果单行缩略即为1*/
	/*! autoprefixer: off */
	-webkit-box-orient: vertical;
}
</style>
已采纳 80 3 0 0 编辑

撰写答案