【React】span等多行文本css省略号不生效

一.多行文本换行并且省略号方案

.text {
  height: 60px;
  line-height: 20px;
  word-break: break-all;

  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 行数 */
  -webkit-box-orient: vertical;
}

二.单行文本显示省略号方案

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

三.在react项目中多行文本省略号不生效

是因为在编译后没有-webkit-box-orient: vertical;

解决方案一：在style中加行内样式

style={{ "WebkitBoxOrient": "vertical" }}

解决方案二：在css样式前加过滤

.text {
  ...

  /* autoprefixer: ignore next */
  -webkit-box-orient: vertical;
}