在表格單元格中隱藏/顯示長文本HTML

Question

我有一個HTML表格，它是由php的MySQL數據庫填充的。我使用Bootstrap提供的css。無論如何，我的問題是，在一些列中，我在每個單元格中都包含一個長文本。我使用的是隱藏內容的css，因爲我想讓我的桌面儘可能緊湊。我嘗試了jQuery的解決方案，但是我對它並不是很滿意，並且它不起作用。我知道有關於此的其他討論，但我無法做出這些工作。

<tbody aria-live="polite" aria-relevant="all"> 
<?php 
$i=0; 
while ($i < $num) { 
    $process=mysql_result($risultati,$i,"process"); 
    $A=mysql_result($risultati,$i,"A"); 
    $B=mysql_result($risultati,$i,"B"); 
    $time_A=mysql_result($risultati,$i,"time_A"); 
    $time_B=mysql_result($risultati,$i,"time_B"); 
    ?> 

    <tr class="odd"> 
    <td><font face="Arial, Helvetica, sans-serif"><?php echo $process;?></font></td> 
    <td ><div id="text"><a class="toggle"><font face="Arial, Helvetica, sans-serif"><?php echo $A;?></font></a></div></td> 
    <td><font face="Arial, Helvetica, sans-serif"><?php echo $B;?></font></td> 
    <td><font face="Arial, Helvetica, sans-serif"><?php echo $time_A;?></font></td> 
    <td><font face="Arial, Helvetica, sans-serif"><?php echo $time_B;?></font></td> 
    </tr> 
    <?php 
    $i++; 
} 
?> 
</tbody> 

這裏的腳本：

<script> 

    $('.toggle').click(function(){ 
     var target = $(this).closest('#text'); 
     if (target.hasClass('expanded')) { 
      target.removeClass('expanded'); 
      $(this).text('(expand)'); 
     } else { 
      target.addClass('expanded'); 
      $(this).text('(collapse)'); 
     } 
    }); 

    </script> 

而這裏的CSS：

#text { 
    white-space:nowrap; 
    overflow:hidden; 
    width:300px; 
    text-overflow:ellipsis; 
    -o-text-overflow:ellipsis; 
} 
#text.expanded { 
    max-height:none; 
} 

Answer 1

考慮OP的有關要求，複製/粘貼單元格的內容，把它放在一個自舉酥料餅的數據內容屬性和應該解決的問題發表評論：

HTML：

<td> 
    <a href="#" class="btn btn-link too-long" title="Optional Title" 
    data-content='Content that is too long to display because there is too much of it to fit in your table cell. But it all fits in this popover!' 
    data-placement="bottom"> 
    Content that is too long to display...</a> 
</td> 

JS：

$('#too-long').popover() 

實施例：http://jsfiddle.net/MjsAp/3/

Answer 2

試試這個：

變化id="test"在你的HTML class="text"

，改變你的qQuery：

var target = $(this).closest('#text'); 

到

var target = $(this).closest('.text'); 

jQuery的不知道哪個#text你指的是因爲#text應該是唯一的。

Answer 3

您可以將單元格的內容複製到title屬性中。用戶在鼠標懸停時將內容看作工具提示。

<td> 
    <div id="test" title="Cell contents that are very long ..."> 
    Cell contents that are very long... 
    </div> 
</td>