html、css文本溢出显示省略号

单行文本溢出省略号

<div class="ellipsis example">单行文本溢出省略号</div>

.example {
	width: 90px;
}
.ellipsis {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
/*
text-overflow (显示省略符号来代表被修剪的文本)
white-space (文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止)
overflow (内容会被修剪，并且其余内容是不可见的)
*/

显示效果：单行文本溢...

多行文字溢出省略号(适用于WebKit浏览器及移动端)

<div class="ellipsis_four example">单行文本溢出省略号</div>

.example {
	width: 30px;
}
/* 以4行文字为例
 * display:-webkit-box;必须结合的属性，将对象作为弹性伸缩盒子模型展示
 * -webkit-line-clamp: 4;需要结合其他属性来使用才有效果
 * -webkit-box-orient: vertical;必须结合的属性，设置子元素(在这里指文字)的排列方式
 */
.ellipsis_four {
　　display:-webkit-box;
　　-webkit-line-clamp: 4;
　　-webkit-box-orient: vertical;
　　overflow: hidden;
}

显示效果：
单行
文本
溢出
省...