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截斷表單元格

回答

相關問題