处理文本截断

text overflow

/* method 1 */
.parent-wrapper{
  width: 100px; /*set by yourself*/
  line-height: 1.05;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* method 2 */
.parent-wrapper {
  width: 100%;
  overflow: hidden;
}
.parent-wrapper p{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow:ellipsis;
}

/* method 3 
 * 文本截断的末尾是一个「箭头」或者「...更多」
 */
.wrapper {
  position: relative;
  width: 260px;
  max-height: 108px; /* h*n */
  line-height: 18px; /* h */
  overflow: hidden;
  
  display: -webkit-box;
  -webkit-line-clamp: 6; /* n */
  -webkit-box-orient: vertical;
  
  font-size: 50px; /* 超重要，最后一行没有头尾顶格，就靠它了 */
}
.wrapper .inner { /* 文本放这里 */
  display: inline;
  vertical-align: top;
  font-size: 12px;
}
.wrapper .ellipsis-ghost { /*「箭头」或者「...更多」*/
  position: absolute;
  bottom: 0;
  right: 2px;
  
  font-size: 12px;
}

/* method 4
 * 按需出现 箭头或者 ...更多
 * demo：http://codepen.io/kmokidd/pen/peRWzY
 */
.wrapper {
  width: 260px;
  max-height: 108px; /* 需要定高 h*n */
  line-height: 18px; /* h */
  overflow: hidden;
}
.txt-wrapper {
  position: relative; /* 很重要，...更多 那层的 wrapper 高度就靠它了 */
  display: -webkit-box;
  -webkit-line-clamp: 6; /* n */
  -webkit-box-orient: vertical;
  font-size: 50px; /* 很重要，最后一行只显示一半就靠它了 */
}
.wrapper .inner {
  display: inline;
  vertical-align: top;
  font-size: 12px;
}
.wrapper .ellipsis-ghost {
  position: absolute;
  left: 50%;
  top: 0;
  width: 100%;
  height: 100%; /* 会超过视觉上显示的高度，为了后面的 fr 准备 */
  background-color: rgba(255,0,0,.3);
  
  font-size: 12px;
}
.wrapper .ellipsis-ghost::before {
  content: "";
  display: block;
  float: right;
  width: 50%;
  height: 100%; /* 高过6行 */
  background-color: rgba(255,255,255,.5);
}
.wrapper .ellipsis-ghost .item-2 {
  float: right;
  width: 50%;
  height: 108px; /* 6行的真正高度 */
  background-color: rgba(0,255,255,.3);
}
.wrapper .ellipsis-ghost .item-3 {
  float: right;
  font-size: 12px;
  background-color: rgba(0,255,0,.4);
  margin-top: -18px; /*其实它是掉下去的，用 mt 负值把它弄上来*/
}