Question

我对Javascript和jQuery知之甚少，而且我正在尝试使用jQuery和dotdotdot插件在第二个换行之后截断表中的TD。

我认为如果不问，我将永远不会学习;

一个。这甚至可能吗？

B中。我如何用dotdotdot实现这一点 - 或者 - 有更好的方法吗？

另一个问题（Cross-browser multi-line text overflow with ellipsis appended within a width and height fixed `<div>`）中的图像正是我想要发生的，但我无法弄清楚如何使其适应表格单元格。不知道Javascript，jQuery似乎最适合做我想到的。

Answer 1

在这里，跳过空单元格，不适用于小于定义的最大字符数的单元格。

$(function(){
  $.each($('td').not(':empty'), function(i,v){
    var count = parseInt($(v).text().length);
    var maxChars = 210;
    if(count > maxChars){
      var str = $(v).text();
      var trimmed = str.substr(0, maxChars - 2);
      $(v).text(trimmed + '...');          
    }  
  });
});

+1为CraftyFella的评论

Here's the working jsFiddle

Answer 2

你可以检查这个jsFiddle，它不使用jQuery，因为根据你的问题你需要知道如何制作省略号，这可以用css而不是需要jQuery。

http://jsfiddle.net/xjLA7/1/

如果您需要通过脚本完成，请告诉我您希望如何实现这一点并且我会发挥更多，但我希望这是您需要使用省略号而不是扩展td使您的td溢出

这是我的来源：

<!DOCTYPE html>
<html>
<head>
<style type="text/css"> 
td.test div
{
    white-space: nowrap;
    width: 70px;
    overflow: hidden;
    border: 1px solid #000000;
    text-overflow: ellipsis;
}
</style>
</head>
<body>

<table>
    <tr>
        <td class="test">
            <div>This is some long text that will not fit in the box</div>
        </td>
    </tr>
    </table>
</body>
</html>

问候。

Answer 3

直接在td元素上调用时，

dotdotdot无法正常工作。您必须在div元素中创建td，将您的内容放在div中，为td元素指定最大宽度/高度，并在其上调用dotdotdot div。

<table>
<tr>
    <th>Short Column</th>
    <th>Long Column</th>
</tr>
<tr>
    <td>Some info</td>
    <td height=50px width=50px>
        <div id='long-column'><p>This is a long column that should be truncated by the dotdotdot plugin.</p></div>
    </td>
</tr>
</table>

<script type=text/javascript>
    $(document).ready(function () {
        $('#long-column').dotdotdot({});
    });
</script>

请参阅此小提琴以获取一个工作示例：

https://jsfiddle.net/q3wdqtw5/

用于截断表格单元格的jQuery和dotdotdot

3 个答案: