单行文本与多行文本超出范围隐藏并显示省略号

在做项目时，很多时候文本内容未超出我们想让它显示的内容，这个时候，就需要把超出的范围隐藏起来

/*****单行文本超出隐藏并显示省略号*****/
.element{
width: 20em;/*不允许出现半汉字截断*/
overflow: hidden; /*自动隐藏文字*/
text-overflow: ellipsis;/*文字隐藏后添加省略号*/
white-space: nowrap;/*强制不换行*/
}

/***多行文字隐藏加省略号***/
.element{
    width: 20em;
    height: 3em;/*注意高度和宽度，不允许出现半汉字截断*/
    line-height: 1.5em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
/*************************/
}