How to set maximum height for table-cell?

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

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

I don't think that the accepted answer actually fully solves the problem. You wanted to have a vertical-align: middle on the table-cells content. But when you add a div inside the table-cell and give it a height the content of that inner DIV will be at the top. Check this jsfiddle. The overflow:hidden; works fine, but if you shorten the content so that it's only one line, this line won't be centered vertically

The solution is not to add a DIV inside the table-cell but rather outside. Here's the Code:

/* some wrapper */
div.d0 {
    background: grey;
    width:200px;
    height: 200px;
}

div.table {
    margin: 0 auto; /* just cosmetics */
    width: 150px;
    height: 150px;
    background: #eee;
    display: table;
}

div.tablecell {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
    height: 100%;
    width: 100%;
    background: #aaa;
}

div.outer-div {
    height: 150px;
    overflow: hidden;
}

<div class="d0">
    <div class="outer-div">
        <div class="table">
            <div class="tablecell">
                Lorem ipsum 
                <!--dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,-->
            </div>
        </div>
    </div>
</div> 

You can do either of the following:

1. Use css attribute "line-height" and set it per table row (), this will also vertically center the content within

2. Set "display" css attribute to "block" and as the following:

td 
{
  display: block;
  overflow-y: hidden;
  max-height: 20px;
}