CSS3 text-overflow 字符串截取

WebKit 浏览器

截取 1 行

.text-cut {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

截取 2 行

.text-cut-2 {
  display: -webkit-box;
  overflow: hidden;

  white-space: normal !important;
  text-overflow: ellipsis;
  word-wrap: break-word;

  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

兼容其他内核

p {
  position: relative;
  line-height: 1.4em;
  /* 高度=2倍的行高 */
  height: 2.8em;
  overflow: hidden;
}
p::after {
  content: "...";
  font-weight: bold;
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0 20px 1px 45px;
}

插件方式

jQuery.dotdotdotClamp.js