超宽文本替换为省略号

单行文本省略

div {
  width: 500px;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 如果不加下面这句是没有效果的，因为浏览器不知道你要从哪里开始省略 */
  white-space: nowrap;
}

多行文本省略

• 私有属性实现

可能有兼容性问题，但是简单

div {
  height: 150px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
}

• 伪元素实现

没有兼容性问题，但是相对复杂

div {
  height: 135px;
  overflow: hidden;
  position: relative;
  /* 两端对齐后省略号与最后一个字的距离会比较固定 */
  text-align: justify;
  padding: 0 1em;
}
/* 将省略号固定在右下角 */
div::before {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
}
div::after {
  content: "";
  /* 文字全部显示的时候小块会把省略号挡住，因此颜色与文字背景色相同 */
  background-color: white;
  width: 1em;
  height: 1.5em;
  position: absolute;
  /* 不能固定在右下角 */
  right: 0;
}