Question

有没有办法确定表格单元格的内容是否会溢出（即换行到单元格中的另一行），如果是，请更改内容？

我有一张桌子，其中一个单元格用于“评论”字段。如果评论足够短，只能在字段中显示，我想只显示文本。但是，如果评论太长，我会在单元格中添加一个小图标，以便在Bootstrap popover中显示完整评论。

我猜我必须用内容填充单元格，以某种方式检查溢出，然后使用我的Bootstrap popover代码覆盖单元格，但我只是不确定如何检查内容将“适合”在细胞中。

Answer 1

设置单元格的高度并设置overflow：hidden;，这有点难看，或者拆分长注释并将额外内容放入隐藏的跨度并使用jquery显示隐藏它

HTML

<table>
    <tr>
        <td valign="top" width="100px" >comment 1:</td>
        <td class="smallComment">Blah blah blah blah blah blah blah blah blah blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blah</td>       
    </tr>
        <tr>
        <td valign="top" width="100px">comment 2:</td>
            <td class="comment2">Blah blah blah blah blah blah blah blah blah blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah <span class="more">blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blah</span></td>       
    </tr>
        <tr>
        <td valign="top" width="100px" >comment 1:</td>
        <td>Blah blah blah blah blah blah blah blah blah blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blha blah blah blah blah</td>       
    </tr>
</table>

CSS

.smallComment {
   display:block; 
   height:30px; 
   overflow:hidden;
}
.more {
    display:none;
}

JAVASCRIPT

jQuery(document).ready(function() {
    jQuery(".comment2").click(function() {

        jQuery(this).find(".more").slideToggle(600);
    });
});

根据内容溢出更改表格单元格内容

1 个答案: