文本溢出隐藏以省略号显示

单行文本

设置如下属性: 必须要设置宽度，与verflow: hidden;text-overflow:ellipsis;hite-space: nowrap;三个属性配合使用

.text{
    width:100px;
    /*溢出隐藏*/
    overflow: hidden;
    /*溢出部分显示省略号*/
    text-overflow:ellipsis;
    /*文本不换行*/
    white-space: nowrap;
    border: 1px solid black;
}

如下效果图：

设置如下属性: 也必须要设置宽度，与verflow: hidden; text-overflow: ellipsis; display: -webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp: 2;五个属性配合使用,如果没有效果就加上属性word-wrap:break-word;

text{
	width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;/*溢出部分显示省略号*/
	display: -webkit-box;
	-webkit-box-orient:vertical;/*垂直方向排列*/
	-webkit-line-clamp: 3;/*规定显示行数*/
	word-wrap:break-word;/*在长单词或 URL 地址内部进行换行*/
}

效果图如下：