单行文本溢出和多行文本溢出，如何加省略号

1.单行省略

        .single{
            width: 100px;
            height: 40px;
            background-color: aquamarine;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

2.多行省略

        .double {
            width: 100px;
            height: 45px;
            background-color: aqua;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            box-sizing: border-box;
        }

3.html结构

  <span>
        多行省略
    </span>
    <div class="double">滑动事件分布式代表分别大幅包围圈番茄网</div>
    <span>
        单行省略
    </span>
    <div class="single">是否合适大家好福建师大会肺结核</div>

4.截图样式