纯CSS实现单行文本和多行文本溢出省略号

1.单行文本

.box{
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
}

2.多行文本

.title {
    width: 5rem;//根据自己需求设定宽度
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;//设定行数，我这里写的2行省略
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }