多行文本超出范围显示省略号

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多行文本截断省略号效果</title>
</head>
<style>
    .wrap{
        height: 40px;
        line-height: 20px;
        overflow: hidden;
    }
    .wrap .text{
        float: right;
        margin-left: -5px;
        width: 100%;
        word-break: break-all;
    }
    .wrap:before{
        float: left;
        width: 5px;
        content: \'\';
        height: 40px;
    }
    .wrap:after{
        float: right;
        content: \'...\';
        height: 20px;
        line-height: 20px;
        /*为三个省略号的宽度*/
        width: 3em;
        /*使盒子不占位置*/
        margin-left: -3em;
        /*移动省略号位置*/
        position: relative;
        left: 100%;
        top: -20px;
        padding-right: 5px;
        text-align: right;
        background: #fff;
        background: linear-gradient(to right, transparent 0%, #fff 50%);
    }
</style>
<body>
    <div class="wrap">
        <div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Qui est rerum molestias temporibus, quibusdam ab laudantium sunt illo aperiam in illum laborum, eius placeat fugit vitae at. 
Aspernatur, perspiciatis, quod!Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Qui est rerum molestias temporibus, quibusdam ab laudantium sunt illo aperiam in illum laborum, eius placeat fugit vitae at.
Aspernatur, perspiciatis, quod!Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Qui est rerum molestias temporibus, quibusdam ab laudantium sunt illo aperiam in illum laborum, eius placeat fugit vitae at. Aspernatur,
perspiciatis, quod!Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Qui est rerum molestias temporibus, quibusdam ab laudantium sunt illo aperiam in illum laborum, eius placeat fugit vitae at. Aspernatur, perspiciatis, quod!
        </div>
    </div>
</body>
</html>