多行省略展示

一行文字超出，使用省略号，我们都知道怎么弄。多行文字超过呢？
这里做了个范例，处理超过两行时，展示省略号。可通过修改-webkit-line-clamp的值控制展示的行数。

<style>
    .text-ellipsis {
        overflow: hidden;
        word-wrap: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .text {
        width: 100px;
        background-color: #00A500;
        color: white;
    }
</style>
<p class="text-ellipsis text">abcdefghijklmnopqrstuvwxyz</p>