CSS-多行文字溢出

要点：

div的宽度不是由div里面的文字决定的。

一行文本，超出文字变成省略号.....

div {
  border:1px solid red;
  white-space: nowrap;/*当文字超过div的时候，不会换行。*/
  overflow: hidden;/*把多出的文本隐藏起来*/
  text-overflow: ellipsis;/*多出的文本变成省略号*/
}

多行文本，超出部分变成省略号.....

搜索方法：css multi line text ellipsis
只能在webkit上实现。

div {
  border: 1px solid red;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

在IE上实现的方法：

div {
  border: 1px solid red;
  overflow: hidden;
  height: 48px;
}