How to set maximum height for table-cell?

css, html

Solution

By CSS 2.1 rules, the height of a table cell is “the minimum height required by the content”. Thus, you need to restrict the height indirectly using inner markup, normally a `div` element (`<td><div>content</div></td>`), and set `height` and `overflow` properties on the the `div` element (without setting `display: table-cell` on it, of course, as that would make its height obey CSS 2.1 table cell rules).

Problem

I got a table-cell with fixed width and height and if text is too large, cell size should remain the same and text should be hidden by overflow:hidden. ``` div { display: table-cell height: 100px; width: 100px; overflow: hidden; vertical-align: middle; } ``` Table-cell, however, expands beyond 100px if too much text is added. Any tricks to prevent it from expanding? Text should be several lines in length, so "white-space:nowrap" solution is not applicable

Original source

Related problems