Html Table: Word Break AND Limit Td Height?

Question

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

Possible duplicate of [CSS text-overflow in a table cell?](http://stackoverflow.com/questions/9789723/css-text-overflow-in-a-table-cell) — Norbert, Nov 18 '15 at 20:18
It's not - I read every related question I could find. That question has to do with cutting off text horizontally - I have no problem doing that. In fact, it's already done in my plunker posted in the q. — VSO, Nov 18 '15 at 20:22
I'm not sure if the problem is actually the word break, but rather height of a table cell is “the minimum height required by the content”. See this question/answer: [How to set maximum height for table-cell?](http://stackoverflow.com/a/13668087/1248889) — jgawrych, Nov 18 '15 at 20:40
@JonathanGawrych Is that the only solution as far as you know? I have solved it like that before, but I was really trying to keep it clean (i.e. no divs /spans/etc inside the cells). — VSO, Nov 18 '15 at 20:43
@VSO I know what you mean. I hate unnecessary divs. Yeah, I tried multiple tinkerings with the css, but aside setting the display to another type (destroying the table in the process), I couldn't find another solution. — jgawrych, Nov 18 '15 at 20:51
Alright, thanks, I will post an answer if I find a way to do it with tables, if not will use your link - appreciate it. — VSO, Nov 18 '15 at 20:54

jgawrych · Accepted Answer · 2015-11-18T21:14:02.787

2

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.

edited Nov 18 '15 at 21:14

answered Nov 18 '15 at 21:01

jgawrych

3,322
1
28
38

Thanks a lot, you saved me a lot of pain. – VSO Nov 18 '15 at 21:03
I was able to break it with an extremely long string, but I think it's as good as it gets without divs. – VSO Nov 18 '15 at 21:09
@VSO Fixed for long sentences (as long as the sentence height does not exceed the -margin amount) – jgawrych Nov 18 '15 at 21:15

score 0 · Answer 2 · answered Nov 19 '15 at 13:34

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

Html Table: Word Break AND Limit Td Height?

2 Answers2