ellipsis，会自动给 td上添加 title属性
如果设置了 Tooltip，当鼠标放在 tr行上时，会显示2个文本提示
image.png
image.png

  1. const columns = [
  2. {
  3.   title: '基金描述',
  4.   dataIndex: 'foundation',
  5.   width: '32%',
  6.   ellipsis: true,
  7.   render: (text) => <Tooltip placement='topLeft' title={text}>{text}</Tooltip>,
  8. },
  9. ]

box

可以通过 css设置显示2行，超出自动隐藏方式，来解决文本超长显示问题。

  1. const columns = [
  2. {
  3.   title: '基金描述',
  4.   dataIndex: 'foundation',
  5.   width: '32%',
  6.   render: (text) => {
  7.     const {length} = text || '';
  8.     return length > 105
  9.     ? (
  10.         <Tooltip placement='topLeft' title={text} className="text-ellipsis">
  11.           {text}
  12.         </Tooltip>
  13.       )
  14.       : text;
  15.   },
  16. },
  17. ]

.text-ellipsis

文本2行显示，超出显示省略号

  1. .text-ellipsis {
  2.   display: -webkit-box;
  3.   -webkit-box-orient: vertical;
  4.   -webkit-line-clamp: 2; // 超出几行省略
  5.   width: 32%;
  6.   word-break: break-all;
  7.   text-overflow: ellipsis;
  8.   overflow: hidden;
  9. }

display: box
box-flex主要让子容器针对父容器的宽度按一定规则进行划分

dispaly: box

主要是控制父容器里面子元素的排列方式、排列顺序、垂直（水平）对齐方式
在元素上设置该属性，可使其子代排列在同一水平上，类似display:inline-block

display: box
https://www.php.cn/css-tutorial-403390.html

display: flex
https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout