jQuery和dotdotdot截断表单元格

我对javascript和jQuery知之甚少，而且我试图用jQuery和dotdotdot插件在第二个包装行后的表中截断TD。jQuery和dotdotdot截断表单元格

我想我不会不问，

A.这甚至可能吗？

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

在这个其他问题的图像（Cross browsers mult-lines text overflow with ellipsis appended within a width&height fixed div?）正是我想要发生的，但我不知道如何适应它在表格单元格中使用。在不了解javascript的情况下，jQuery似乎最适合做我心目中的事情。

来源

2012-07-20 RobJSchultz

你只是想截断在特定字符数的文本没有readmore按钮？ – Ohgodwhy 2012-07-20 14:44:58

@Ohgodwhy可以工作，只要它仍然包裹多条线以填充TD元素的指定高度。 – RobJSchultz 2012-07-20 14:51:35

[这是否模拟了预期的功能？]（http://jsfiddle.net/Ohgodwhy/Bk5Uq/），[或者你想要有更多的字符允许？]（http://jsfiddle.net/Ohgodwhy/Bk5Uq/1 /） – Ohgodwhy 2012-07-20 14:58:36

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

$(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的评论时，td元素上直接调用

Here's the working jsFiddle

来源

2012-07-20 15:28:10 Ohgodwhy

你想要var trimmed = str.substr（0，maxChars - 2）;保持在210个字符不是吗？ – CraftyFella 2012-07-20 15:32:32

看起来不错！我非常感谢你的帮助。再次感谢！ – RobJSchultz 2012-07-20 15:33:23

+1我喜欢使用字符串的长度来指定何时应该添加省略号而不是使用td的集合。 – 2012-07-20 15:34:04

你可以检查这个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-20 15:26:53

Ahhh我重新阅读了您的问题，并且看到您希望省略号更加智能地应用。我会留下我的回答，以便可以看到基本的CSS，但我可以看到它不会跳过td，因为在Ohgodwhy的回答和省略号是不分青红皂白地添加的，而不是在第一行或一定长度的字符之后添加。 – 2012-07-20 15:33:17

dotdotdot不能正常工作。您必须在td元素内创建一个div，将您的内容放入div，为td元素指定最大宽度/高度，并在div上调用dotdotdot。

<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-04 15:54:05

jQuery和dotdotdot截断表单元格

回答

相关问题