css设置内容超出后显示省略号

在写前端页面时，通常会遇到文字超出后显示省略号；
页面本来是这个样子的，第一行的文字超出已经压倒了下面的文字，

第一步，使用overflow: hidden把超出的内容进行隐藏，页面变成了这样

第二步使用white-space: nowrap设置内容不换行，变成了这样

第三步，使用text-overflow: ellipsis设置超出内容为省略号，功能实现~

多行

.swipe-title{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}