CSS 文字多行超长，自动用省略号"..."表示

<style>
.lineclamp {
/* config */
background-color: #fff;
/* config end */
position: relative;
padding-right: 1em;
overflow: hidden;
}

.lineclamp:before {
content: "...";
position: absolute;
right: 0;
bottom: 0;
display: inline-block;
width: 1em;
}

.lineclamp:after {
content: "";
position: relative;
right: -1em;
float: right;
width: 1em;
height: 100%;
background-color: inherit;
}
</style>

然后在需要省略的地方引用样式,这里貌似一定要span包裹起来

<div class="lineclamp" style="height: 100px;">
<span style="font-size:18px; font-weight:bold">
${contentsDto.title }
</span>
</div>

是根据heigth 和 width:1em 来控制多行省略带【...】号.
IE11上测试没问题哦

给个在线效果地址(缩小窗口大小就可以看到效果)：http://byodkm.github.io/lineclamp/test/

实现参考地址：http://qiita.com/BYODKM/items/83442749a985cb81448e