不在表格中显示受限数据？答案

【问题标题】：Do not show restricted data in the table?不在表格中显示受限数据？
【发布时间】：2020-02-16 08:59:08
【问题描述】：

如何限制在表的列中获取的数据。所以在某个字符之后，表格显示“transact ...”。

我收到的数据：列出操作在表格上最多显示 15 个字符。在 15 个字符后显示为“...”。

如何使用 react 来做到这一点？

【问题讨论】：

slice 正文并添加...?
如何用 reactjs 做到这一点？桌上有例子吗？

标签： reactjs html-table

【解决方案1】：

有两种方法可以实现这一点。一个使用 JavaScript，另一个使用 CSS

使用 CSS：（推荐方式）
Css 有一个名为 text-overflow: ellipsis; 的属性，该属性会截断 fixed-width html 元素的文本，并在末尾添加 ...。确保设置max-width和overflow: hidden

参见下面的 sn-p：

.text-overflow-test td {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<table class="text-overflow-test" border="1">
  <tbody>
    <tr>
      <td>This is short text</td>
      <td>This is short text</td>
    </tr>
    <tr>
      <td>This is very long long long very long long long very long long long text</td>
      <td>This is very long long long very long long long very long long long text</td>
    </tr>
  </tbody>
</table>

使用 Javascript：
检查长度是否大于 15。将文本切片并在末尾添加 ...。

const data = [
	{text: "less than 15"},
	{text: "This text is a lot more than just 15 characters"},
	{text: "15   characters"},
]

const slicer = (text) => text.length > 15 ? text.slice(0,15) + '...' : text

const slicedData = data.map(obj => {
	return {
		text: slicer(obj.text)
	}
})

console.log(slicedData)

不推荐使用 javascript 方式，因为它会更改您传递给表的实际数据，从而导致信息丢失。

【讨论】：

【解决方案2】：

对于这种情况，您可以使用 css 属性 text-overflow。

.long-cell {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<table>
<thead>
  <th>Col 1</th>
  <th>Col 2</th>
  <th>Col 3</th>
</thead>
<tbody>
  <tr>
    <td>Short text</td>
    <td>Short text</td>
    <td class="long-cell">Longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext</td>
  </tr>
  <tr>
    <td>Short text</td>
    <td>Short text</td>
    <td class="long-cell">Longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext</td>
  </tr>
  <tr>
    <td>Short text</td>
    <td>Short text</td>
    <td class="long-cell">Longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext longtext</td>
  </tr>
</tbody>
</table>

【讨论】：