CSS实现文本换行,并在最后添加省略号

一、单行换行

.text{
	display:inline-block;
    width:400px;
    overflow: hidden;
    white-space: nowrap;
	text-overflow: ellipsis;
}

二、多行换行

.content {
    width: 820px;
    line-height: 25px;
    word-break: break-all;
    text-overflow: ellipsis;
    /** 对象作为伸缩盒子模型显示 **/
    display: -webkit-box;
    /** 设置或检索伸缩盒对象的子元素的排列方式 **/
    -webkit-box-orient: vertical; 
    /** 显示文本的行数 **/
    -webkit-line-clamp: 3; 
    /** 超出的内容隐藏 **/
    overflow: hidden; 
}