react antd表格td内容过长显示三个点(解决react项目多行文本溢出显示省略号)

一、react antd表格td内容过长显示三个点

一、问题描述

表格过td内容过长，想要显示三个点。因为过长会换行导致，表格很不好看。

 想要实现的效果，这样不影响象美观。

 二、实现步骤

import React, { Component } from 'react';

import { Table, Input, TreeSelect,Tooltip } from 'antd';



class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [
                {
                    id: 1,
                    num: 100,
                    price: 30,
                    describe: "凝胶洗手液 – 假日香味：有时候季节性洗手的香味就是我们需要唤醒我们的假日精神。我们的天然衍生凝胶洗手液有各种节日香氛可供选择，让您的双手柔软，干净，随时可以塞进一对公平的手套，这真是一年中最美好的时光。"
                }
            ],
            columns: [],
            data1: []
        }
    }
    componentDidMount() {
        const columns = [
            {
                title: 'id',
                dataIndex: 'id',
                key: 'id',
                align:"center",
                render: text => <>{text}</>,
            },
            {
                title: '数量',
                dataIndex: 'num',
                key: 'num',
                align:"center",
            },
            {
                title: '价格',
                dataIndex: 'price',
                key: 'price',
                align:"center",
            },
            {
                title: '描述',
                dataIndex: 'describe',
                key: 'describe',
                align:"center",
                width:300,
                render: (text, record) => {
                   return <Tooltip placement="top" title={text}><div style={{width:280,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{text}</div></Tooltip>
                }
            }
        ]
        this.setState({
            columns: columns
        })
    }
    numhandleChange = (value, e) => {

    }
    render() {
        console.log(this)
        return (
            <div>
                <Table bordered columns={this.state.columns} dataSource={this.state.data}></Table>
                <TreeSelect />
            </div>
        )
    }

}


export default Index

用className也可以

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

  render: (text, record) => {
                   return <Tooltip placement="top" title={text}><div className={"text"}>{text}</div></Tooltip>
                }

想要多行，不太行也不知道是什么原因

二、react项目多行文本溢出显示省略号(亲测两个都有效果)

一、问题描述

react项目多行文本溢出显示省略号，不生效。

我试了一下html里可以但是react不知道为什么不可以。

.text{
    width: 280px;
    display: -webkit-box;  //必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
    word-break: break-all;
    text-overflow: ellipsis; //可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。
    overflow: hidden;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    color: red;
  }

二、解决步骤

方案一、使用style和className结合

.text{
    width: 280px;
    display: -webkit-box;  //必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
    word-break: break-all;
    text-overflow: ellipsis; //可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。
    overflow: hidden;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    color: red;
  }

 <div className={styles.text} style={{"WebkitBoxOrient": "vertical"}}>
                    凝胶洗手液 – 假日香味：有时候季节性洗手的香味就是我们需要唤醒我们的假日精神。我们的天然衍生凝胶洗手液有各种节日香氛可供选择，让您的双手柔软，干净，随时可以塞进一对公平的手套，这真是一年中最美好的时光。
  </div>

方案二、使用/* autoprefixer   : ignore next */ 或者  

  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */

 （1）

.text{
    width: 280px;
    display: -webkit-box;  //必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
    word-break: break-all;
    text-overflow: ellipsis; //可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。
    overflow: hidden;
    -webkit-line-clamp: 4;
    /* autoprefixer: ignore next */
    -webkit-box-orient: vertical;
    color: red;
  }

（2） 

.text{
    width: 280px;
    display: -webkit-box;  //必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
    word-break: break-all;
    text-overflow: ellipsis; //可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。
    overflow: hidden;
    -webkit-line-clamp: 4;
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
    color: red;
  }

  这个如果有报错请使用上面的（1），因为可能会有兼容问题 。

 html

 <div className={styles.text} >
                    凝胶洗手液 – 假日香味：有时候季节性洗手的香味就是我们需要唤醒我们的假日精神。我们的天然衍生凝胶洗手液有各种节日香氛可供选择，让您的双手柔软，干净，随时可以塞进一对公平的手套，这真是一年中最美好的时光。
  </div>

三、单行文本超出显示三个点

 white-space: nowrap;
 text-overflow:ellipsis;
 width:100px;
 overflow:hidden;