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