解决React中多行文本省略不生效的情况

文本溢出分为两种情况，一种是单行文本溢出，一种是多行文本溢出。

1. 单行文本溢出显示省略号

width: 140px; //宽度必须要加上
white-space: nowrap; //不换行
overflow: hidden;
text-overflow: ellipsis; //省略号“…”隐藏超出范围的文本
display: inline-block; //如果不是行内样式，需要转成行内样式

2. 多行文本溢出显示省略号

在React项目之中不生效是因为在react编译后没有-webkit-box-orient: vertical

index.js文件

import React from 'react';
import "./index.less"

export default class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {}
    }
    render() {
        return (
            <div>
				<p>
        			文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文	本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本
      			</p>
            </div>
        )
    }
}

less文件

  div {
        margin: 15px 0;
        height: 120px;
        border: 1px solid red;
        width: 200px;
      }
  	p {
        overflow: hidden; /*超出隐藏*/
        text-overflow: ellipsis; /*文本溢出时显示省略标记*/
        display: -webkit-box; /*设置弹性盒模型*/
        -webkit-line-clamp: 3; /*文本占的行数,如果要设置2行加...则设置为2*/
        /*! autoprefixer: off */
        -webkit-box-orient: vertical; /*子代元素垂直显示*/
        /* autoprefixer: on */
      }