在表格单元格中隐藏/显示长文本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>