多行文本溢出显示省略号

TIP

多行文本溢出显示省略号，有较大兼容性问题， 适合于webKit浏览器或移动端（移动端大部分是webkit内核）

CSS代码

.box {
    width: 100px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

Html代码

<div class="box">明日复明日，明日何其多，我生待明日，万事成磋砣。世人苦为明日累，春去秋来老将至。朝看水东流，暮看日西坠。百年明日能几何？请君听我明日歌!</div>

展示效果

普通的溢出显示省略号

.box{
    width: 300px;
    background-color: #cc0;
    line-height: 1.4em;
    height: 2.8em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}