[html&css] 单行超出省略和多行超出省略

单行省略

关键属性：width，overflow，text-overflow，white-space

床前明月光，疑是地上霜。举头望明月，低头思故乡。

.single-line {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

多行省略

关键属性：display: -webkit-box， -webkit-box-orient: vertical，-webkit-line-clamp: 3

静夜思.李白。床前明月光，疑是地上霜。举头望明月，低头思故乡。门前大桥下，游过一群鸭，快来快来数一数，二四六七八。

.multiple-line {
  width: 200px;
  line-height: 32px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}