DataTables 如何剪切字符串并添加 (...) 并将完整字符串放入工具提示中 [英] DataTables how to cut string and add (...) and put the full string in tooltip

问题描述

我的网站使用了很好的 DataTables.

I use fine DataTables for my website.

在几行中，字符串可能会非常长(例如 500 到 1000 个字符).

In a few rows it can happens that the string is very very long (e.g. 500 to 1000 chars).

如何在 20 个符号处剪切，添加..."并将其放入工具提示中?

How to cut that at 20 signs, add "..." and put that in a tooltip?

(当然，我知道子字符串并知道如何添加工具提示，我只想知道数据表上是否有适合我的功能/选项，或者我可以在哪个事件上获取数据并剪切它并添加工具提示到单元格)

(of course I know substring and know how to add a tooltip, I just want to know if there is a feature / option for me on datatables or on which event I can get the data and cut it and add a tooltip to the cell)

推荐答案

我不知道 pure DataTables 解决方案，但这可以通过设置固定来实现列宽(通过 CSS 或 DataTables 选项)与表格单元格上的 text-overflow: ellipsis 相结合.

I don't know of a pure DataTables solution but this can be achieved by a setting fixed column width (via CSS or DataTables options) combined with text-overflow: ellipsis on your table cells.

要使 text-overflow 工作，您还需要指定固定宽度，设置 overflow: hidden 和 white-space: nowrap:

For text-overflow to work you also need to specify a fixed width, set overflow: hidden and white-space: nowrap:

.limited{
    white-space: nowrap;
    width: 100%;                   
    overflow: hidden;
    text-overflow: ellipsis;
}

要查看完整的单元格内容，请将其添加到单元格的title 属性:

To see the full cell content add it to the cell's title attribute:

<td class='limited' 
  title='Very long cell content which is to long for the cell but shown as a tooltip'>
  Very long cell content which is to long for the cell but shown as a tooltip
</td>

可能看起来像这样:

请参阅关于 MDN 文章>text-overflow 了解更多详情.

See the MDN article on text-overflow for more details.

另一种选择是使用数据表正交数据功能.与仅使用 substring 来限制单元格内容相比，这将允许您保持完整的单元格内容可搜索:

Another option would be using DataTables orthogonal data feature. In contrast to just using substring to limit the cell content, this would allow you to keep the complete cell content searchable:

<td data-search='Very long cell content which is to long for the cell but shown as a tooltip' 
   title='Very long cell content which is to long for the cell but shown as a tooltip'>
   Very long cell content...
</td>

输出将与上面相同.

这篇关于DataTables 如何剪切字符串并添加 (...) 并将完整字符串放入工具提示中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！