How to set maximum height for table-cell?

Question

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

Answer 1

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).