CSS：控制文本溢出显示省略号

单行文本

p{
	overflow: hidden;			/* 隐藏文字超出部分 */
	text-overflow: ellipsis;	/* 使用省略号代替超出部分的文字 */
	white-space: nowrap; 		/* 文字不换行 */
}

多行文本

1. 该方案只适合webkit内核的浏览器或移动端

p{
	overflow: hidden;
    display: -webkit-box;			/* 将对象作为弹性伸缩盒子模型展示 */
    -webkit-box-orient: vertical;	/* 设置或检索伸缩盒对象的子元素的排列方式 */
    -webkit-line-clamp: 2;			/* 设置显示文本的行数 */
}

2. 利用伪元素添加省略号

1. before伪元素负责创建位于p标签右下端的省略号
2. after伪元素负责创建一个大小大于before伪元素，背景和p标签背景相同且位于p标签右端的元素
3. 当文本没有溢出时，after伪元素会覆盖before伪元素
4. 当文本溢出后，after伪元素会同样溢出p标签隐藏，before伪元素就会显示出来

p{
	height: 50px;					/* 指定p标签高度 */
	line-height: 25px;				
	overflow: hidden;				/* 文本溢出隐藏 */
	position: relative;				/* 相对定位，使伪元素相对于p标签绝对定位 */
}
/* 在p标签的右下角添加省略号 */
p::before{
	content: "...";
	position: absolute;
	right: 0;
	bottom: 0;
}
/* 创建一个大小大于before伪元素，背景和p标签背景相同的after伪元素 */
p::after{
     content: "";
     height: 1em;
     width: 1em;
     background: white;			/*要求与p标签同背景，达到隐藏before伪元素的效果*/
     position: absolute;		/* 使伪元素始终位于p标签右端，调整该元素位置使其遮盖住before伪元素 */
     right: 0;
 }

3. 利用伪元素在结尾添加模糊效果

1. 溢出文本隐藏
2. after伪元素始终位于p标签右下角，利用背景线性渐变呈现出模糊效果

p{
	height: 50px;					/* 指定p标签高度 */
	line-height: 25px;				
	overflow: hidden;				/* 文本溢出隐藏 */
	position: relative;				/* 相对定位，使伪元素相对于p标签绝对定位 */
}
/* 在p标签的右下角创建一个空白伪元素，高度大于字体高度，宽度自定义，背景设置线性渐变 */
p::after{
	content: "";
    position: absolute;
    height: 20px;
    width: 50px;
    background: linear-gradient(to right, transparent , white 80%);		/* 背景从透明色到白色的线性渐变 */
    right: 0;
    bottom: 0;
}