我有一个 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;
}
最佳答案
考虑到 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()
关于javascript - 在表格单元格 HTML 中隐藏/显示长文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23715839/