常用的单行、多行文本溢出隐藏方法

单行溢出文本隐藏

.hidden {
  overflow: hidden; // 文字长度超出限定宽度，则隐藏超出的内容
  white-space: nowrap; // 设置文字在一行显示，不能换行
  text-overflow: ellipsis; // 规定当文本溢出时，显示省略符号来代表被修剪的文本
}

多行溢出文本隐藏

注意：多行文本溢出隐藏不需要设置white-space: nowrap，因为设置了之后文字就不会换行了，还怎么达到多行显示的目的呢？

.hidden {
  display:-webkit-box;         // 将元素作为弹性伸缩盒子模型显示
  overflow: hidden;            // 文本溢出限定的宽度就隐藏内容
  text-overflow: ellipsis;     // 多行文本的情况下，用省略号 “…” 隐藏溢出范围的文本
  -webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
  -webkit-line-clamp:3;        // 用来限制在一个块元素显示的文本的行数
}