CSS 省略号

单行省略

.box1 {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

多行省略

.box2 {
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

-webkit-box-orient: vertical; // 垂直排列

说明

1. line-clamp 在 caniuse 中显示浏览器内可用，实际不可用
2. -webkit-line-clamp 在主流浏览器内都可以用，包括不是 webkit 内核的 firefox
3. 空白处理：white-space & 单词处理：word-break