根據內容溢出更改表格單元格內容

Question

有沒有一種方法可以確定表單元格的內容是否溢出（即換行到單元格的另一行），如果是，則更改內容？

我有一張桌子，其中一個單元格用於“注釋”字段。 如果評論足夠短，只能顯示在字段中，那么我只想顯示文本。 但是，如果注釋太長，我會在該單元格中放置一個小圖標，以在Bootstrap彈出窗口中顯示完整的注釋。

我猜想我必須用內容填充單元格，以某種方式檢查溢出，然后用我的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);
    });
});