参考：https://blog.csdn.net/weixin_40795574/article/details/113929237

博主遇到的情况是，弄了一个标签列表，里边的文案最宽300px，超出部分可省略，这样就会遇到标题所描述的问题。

<Row className={styles.rowWrapToolTip}>
            {
              (array || []).map((item, idx) => {
                let val = item.val;
                switch (item.name) {
                  case 'dotime': val = moment(item.val[0]).format('YYYY-MM-DD') + '~' + moment(item.val[1]).format('YYYY-MM-DD'); break;
                  case 'monitorPlan': val = val === '-1' ? '全部' : val; break;
                  case 'executeWay': val = val === '-1' ? '全部' : val; break;
                  case 'publisherIds': val = pubLabel; break;
                  default: val = Array.isArray(val) ?
                    (val || []).reduce((prev, next) => { if (next && next.value) { return next = (prev.label || prev) + (next.label || '') + '\\'; } else { return next = prev + next + '\\'; } }, '')
                    : val;
                }
                // 删除发布人最后一个多余的逗号
                let length = val.length - 1;
                if (item.name === 'publisherIds' && val.lastIndexOf(',') === length) {
                  val = val.substring(0, length);
                }
                if (item.name === 'activityOrg' && item.val && item.val.length === 0) {
                  val = branchVal;
                }
                return <CustomLabel key={idx} label={item.label} value={val} />
              })
            }
          </Row>

import React, { useState } from 'react';
import { Tooltip } from 'antd';
import styles from './index.less';

const CustomLabel = (props) => {
    let { label, value } = props;
    if (typeof value === 'string') {
        value = value.includes('\\') ? value.substring(0, value.length - 1) : value;
    } else {
        value = '';
    }

    return (
        <React.Fragment>
            {
                value && <div className={styles.labelWrapper}>
                    <span className={`${styles.label} ${styles.labelStyl}`}>{label}：</span>
                    <span className={`${styles.label} ${styles.valueStyl}`}>
                        <Tooltip placement="right" title={value}>
                            <div className={`${styles.toEllipsis}`}>{value}</div>
                        </Tooltip>
                    </span>
                </div>
            }
        </React.Fragment>
    );
};

export default CustomLabel;

.wrapper {
    padding: 15px 0;
    // border: 1px solid rgba(0, 0, 0, 0.05);
}
.operBtns {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    .operBtn {
        width: 100px;
        height: 32px;
    }
}
.typeWrapper {
    display: flex;
    flex-direction: row;
    width: 100%;
    .actType {
        width: 108px;
    }
    .actTypeSelect {
        flex: none;
        width: 100%;
        max-width: none;
    }
}
.width_100 {
    width: 100%;
}
.a_symbol {
    display: inline-block;
    margin: 0 8px 0 2px;
    color: #A1A1B4;

}
.actType {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.rowWrapToolTip {
    display: flex !important;
    flex-direction: row;
}

解决

需要将ToolTip标签中的内容，例如span标签或纯字符串，换成div标签内放字符串。
并且在外层的Row容器，设置display:flex; flex-direction: row;
而每个标签项的容器则处理省略的样式