Change table cell contents based on content overflow

Question

Is there a way to determine whether the content of a table cell would overflow (ie wrap to another line in the cell) and if so, change the content?

I have a table, and one of the cells is for a "comment" field. If the comment is short enough to just be displayed in the field, I would like to just display the text. However, if the comment is too long, I instead what to put a little icon in the cell that would show the full comment in a Bootstrap popover.

I'm guessing I'd have to fill the cell with the content, somehow check for overflow, and then overwrite the cell with my code for the Bootstrap popover, but I'm just not sure how to check if the content will "fit" in the cell or not.

Answer 1

Either set the height of the cell and and set overflow:hidden;, which is kinda ugly, or split up the long comment and put the extra into a hidden span and use jquery to show hide it

fiddle

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);
    });
});