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

查看:79
本文介绍了DataTables如何剪切字符串并添加(...)并将完整的字符串放入工具提示中的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在我的网站上使用了很好的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)

推荐答案

我不知道 DataTables 解决方案,但是可以通过在表单元格上设置固定的列宽(通过CSS或DataTables选项)并结合 text-overflow:省略号来实现。

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.

要使文本溢出工作,还需要指定固定宽度,设置 overflow:隐藏空格: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文章 -溢出了解更多信息。

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

另一种选择是使用数据表正交数据功能。与仅使用子字符串来限制单元格内容相反,这将使您可以使整个单元格内容保持可搜索状态:

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆