1

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

我想我永远不会不问就学；

A. 这甚至可能吗？

B. 我将如何使用 dotdotdot 来实现这一点 - 或者 - 有没有更好的方法？

另一个问题中的图像（Cross-browser multi-line text overflow with ellipsis added within a width and height fixed `<div>`）正是我想要发生的，但我不知道如何适应它在表格单元格中使用。在不了解 Javascript 的情况下，jQuery 似乎最适合我的想法。

4

3 回答 3

4

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

$(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 + '...');          
    }  
  });
});

为 CraftyFella 的评论 +1

这是工作的jsFiddle

于 2012-07-20T15:28:10.687 回答
1

你能检查一下这个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>​

问候。

于 2012-07-20T15:26:53.883 回答
0

tddotdotdot 直接在元素上调用时无法正常工作。您必须div在元素内部创建一个td，将您的内容放入 . 中div，指定td元素的最大宽度/高度，然后在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/

于 2015-11-04T15:54:05.537 回答