css当文字超过指定宽度时，超出部分用“...“省略号表示

html

<p>红红火火恍恍惚惚斤斤计较溜了溜了凄凄切切呜呜哇哇柔柔弱弱吞吞吐吐一样一样乒乒乓乓重中之重休息休息宝宝贝贝男男女女密密麻麻坎坎坷坷</p>

css单行

p {
	width: 300px;
	overflow: hidden;
	text-overflow: ellipsis;/* 超出省略号 */
	white-space: nowrap;
}

效果图：

css多行

p {
	width: 200px;
	height: 36px; /* 高度根据多行文字一共占多少高度写 */
	line-height: 18px;
	font-size: 14px;
	overflow: hidden; 
	-ms-text-overflow: ellipsis;
	text-overflow: ellipsis; /* 超出省略号 */
	display: -webkit-box; 
	-webkit-line-clamp: 2; /* 控制行数 */
	-webkit-box-orient: vertical; 
}

效果图：