ant design table td 超长时如何显示省略号

Question

1.table组件不知如何设置样式，无法设置table-layout : fixed，导致无法使td内容超长时显示省略号，请问有哪些设置table样式的方法吗？

2.如果不通过设置table的样式，还有什么方案可以使td文字超长时显示省略号吗？（不通过js的）

求指导

Answer 1

感谢并参照@王利洁的答案，这里附上更具体的实施方案

columns

{
  title: 'SQL',
  dataIndex: 'sqltxt',
  key: 'sqltxt',
  width:'30%',
  render: (text) => <span className="col-sql">{text}</span>,
}

附上CSS，这里用的WebKit的CSS扩展属性（注意：属于不规范CSS属性），支持多行文本省略，关于更多文本省略样式内容

.col-sql{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

@方丈张 ，我上面叙述的是使用webkit私有属性进行换行溢出的方法，如果您只需要单行省略，可以设置成1： -webkit-line-clamp: 1，如果您的项目对于浏览器有兼容要求的话，即不能使用webkit前缀，而采用 white-space属性的话，您可以如下设置：

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
width: 400px;  //美中不足的就是这里width需要定值

讨论里可能是我叙述错误，这里我都只套了一层span，没有两层span。

我调试了下，发现ant的tb的display为table-cell，可能是导致white-space：nowrap宽度失效的原因。所以这里需要设置一个宽度定值。

而您所提到的省略号只有1个而不是3个原因，我没有遇到，猜想下是不是宽度设置的过大导致无法显示完整呢？

Answer 2

{ title: 'Action', dataIndex: '', key: 'x', render: (text) => <span className="classname">{text}</span> },

Answer 3

{
  title: 'SQL',
  dataIndex: 'sqltxt',
  key: 'sqltxt',
  width:'30%',
  ellipsis: true,
}

Answer 4

这种方法失败

Answer 5

https://www.jianshu.com/p/978...
可以参考一下我的处理方法

Answer 6

按照 @沐予 的方案，长内容是解决了。但是如果想在ToolTip中显示全部的内容呢？按照下面这样写，tooltip里的内容也会被截断。

render: (text) => 
          <Tooltip placement="topRight" title={text} arrowPointAtCenter>
            <span className="col-sql">{text}</span>
          </Tooltip>,

有什么办法让tooltip中的内容显示完整吗？