单行文本、多行文本显示省略号

单行文本显示省略号

p{
	white-space: nowrap; /* 强转为单行*/
	overflow: hidden;
	text-overflow: ellipsis; /* 超出部分显示省略号 */
}

实现效果

多行文本显示省略号

webkit实现方式

p{
	display: -webkit-box; /* 将对象作为弹性的伸缩盒子显示 */
	-webkit-box-orient: vertical; /* 设置伸缩盒子对象内子对象的排列方式 */
	-webkit-line-clamp: 2; /* 用该属性来限定块元素内文本显示的行数*/
	overflow: hidden; /* 超出范围隐藏 */
	text-overflow: ellipsis; /* 若没有省略号可加此属性 */
}

实现效果

通用实现方式

p{
	height: 60px;
	line-height: 2em; /* 设置行高 */
	overflow: hidden; /* 超出部分隐藏 */
	position: relative;
}
p::after{
	content: "...";
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 0 10px;
	background: #fff; /* 使用背景颜色遮住内容*/
}

实现效果