在表格單元格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關於復制/粘貼單元格內容要求的評論，將其放在Boostrap彈出窗口的data-content屬性中，這應該可以解決問題：

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

嘗試這個：

將HTML中的id="test"更改為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>