CSS: 通过CSS控制字符串长度（一行或者多行）

• 一行时，超出长度的部分变为省略号

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

注：通过width来控制字符串长度

• 多行时，在第n行超出的部分变为省略号

.text-ellipsis {
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}

注：通过-webkit-line-clamp来控制你要在第几行省略。默认编译的时候，-webkit-box-orient: vertical;会被过滤，通过以上注释的写法才可生效，或者在react项目中，在对应需要加样式的地方添加style属性：style={{WebkitBoxOrient: "vertical"}}也可生效