css文字超出显示省略号

<div>
    <h2>单行</h2>
    <div class="box1"></div>
</div>
<br />
<div>
    <h2>多行</h2>
    <div class="box2"></div>
</div>
<style>
    .box1{
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .box2{
        word-break: break-all; 
        text-overflow: ellipsis; 
        overflow: hidden; 
        display: -webkit-box; 
        -webkit-line-clamp: 2; /* 行数 */
        -webkit-box-orient: vertical;
    }
</style>