javascript - 在表格单元格 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 弹出框的数据内容属性中，这应该可以解决问题:

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/