CODEWITHSUNDEEP
javascripthtmlcss
VSO
VSO

Reputation: 12646

Html Table: Word Break AND Limit Td Height?

I am able to limit table cell (<td>) width - I just set the width, and set overflow to hidden. However, I am NOT able to limit table cell height and keep word wrap. If I remove word-wrap, the height stays consistent (nothing forces it, because text just continues horizontally and gets cut off). If I add word-wrap, it seems to ignore the height property and expands the cell vertically.

PLNKR

The goal is to set a fixed table width and height, and then have text wrap (break to next line when reaching horizontal end of cell), but to be cut off vertically when it reaches the bottom. My current styles are these:

    <style>
    table{
        border: 1px solid;
        table-layout: fixed; 
        border-collapse: collapse; 
    }

    tr{
        vertical-align: top;
    }

    td{ 
        word-break:break-all;
        width: 80px;
        height: 40px; 
        border: 1px solid;
        border-collapse: collapse; 
        overflow: hidden; 
    }
    </style>

Edit: This is a bonus, but ideally, if an image was placed in a cell, that would get cut off both vertically and horizontally as well, but that's just a "nice to have" and not really part of the q.

Edit 2: Here is an inline-block solution, but it's undesirable, hence not posted as an answer: http://plnkr.co/edit/qvA1wzkEdcrsA2Y9qWdV?p=preview

Upvotes: 1

Views: 2410

Answers (2)

VSO
VSO

Reputation: 12646

I am just posting the "basic"/obvious solution for anyone reading this post later. Put a div inside your table cell, and set width/height to the same size as the cell. Then set the div's overflow and overflow-y to hidden. You shouldn't have any problems with margins/padding/etc, but you can set them to zero if need be.

    td{ 
        word-break:break-all;
        width: 80px;
        height: 40px; 
        border: 1px solid;
        border-collapse: collapse; 
        overflow: hidden; 
        background-color:yellow;
    }

    div{
      background-color:cyan;
        width: 80px;
        height: 40px; 
        overflow: hidden; 
        overflow-y: hidden;
    }

Upvotes: 0

jgawrych
jgawrych

Reputation: 3542

Figured it out! (Except the answer it a little hokey and only works in CSS3). Using a psuedo after element, and a negative margin, we can trick the table cell into not expanding it's height:

td:after {
    content: '';
    display: block;
    margin-bottom: -10000px;
}

Example plunker: http://plnkr.co/edit/frch27eCDoTBlDEVyUGB?p=preview

Edit: It seems that -100% will stop the table cell from expanding equal to the height of the table. Thus -100% is not the optimal solution. We'll replace this with a extremely large negative pixel amount. This will fix very long sentences.

Upvotes: 2

Related Questions