Change table cell contents based on content overflow

Question

Is there a way to determine whether the content of a table cell would overflow (i.e. 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.

a little help with your HTML CODE would have been better or a fiddle so that we can work on it... — bipen, Jul 01 '13 at 18:32
You can do what you want with some simple javascript: http://stackoverflow.com/questions/4880381/check-whether-html-element-has-scrollbars But really, from a UI standpoint. Wouldn't it make more sense to just always put 1 line of the comment with a `...` or `read more` if it overflows? Why hide it completely if it's too long? — Daniel Moses, Jul 01 '13 at 18:41
DMoses- I definitely think you're right, that that's better UI, but I figured it was more simple to determine if a cell overflows than it would be to determine the point at which it overflows. Like the comment I left on the below solution, do you know how to determine where to split up a cell's contents, to ensure it won't overflow? — Joseph, Jul 01 '13 at 19:42

score 0 · Answer 1 · answered Jul 01 '13 at 18:48

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

This solution seems reasonable, but I think my problem is programatically determining where to cut off the text? — Joseph, Jul 01 '13 at 19:40

Change table cell contents based on content overflow

1 Answers1