div table-cell和overflow不工作

Question

为什么这种溢出不起作用？

http://jsfiddle.net/kacx4kad/

<div class="table">
    <div class="table_row">
        <div class="table_cell">
            wee<br>wee<br>wee<br>wee<br>wee<br>wee<br>wee<br>wee
        </div>
    </div>
</div>

.table {
    display:table;
    width:100%;
}

.table_row {
    display:table-row;
}

.table_cell {
    position:relative;
    display:table-cell;
    vertical-align:top;

    background:red;
    height:50px;
    max-height:50px;
    overflow:hidden;
}

Answer 1

查看代码的结构，溢出< .table_cell 内联块的显示属性值 溢出< / strong>值生效。否则，你就会改变一切。

.table {
	display:table;
	width:100%;
}

.table_row {
	display:table-row;
}

.table_cell {
	position:relative;
	display: inline-block;
	vertical-align:top;
    
    background:red;
    height:50px;
    max-height:50px;
    overflow:hidden;
}

<div class="table">
    <div class="table_row">
        <div class="table_cell">
            wee<br>wee<br>wee<br>wee<br>wee<br>wee<br>wee<br>wee
        </div>
    </div>
</div>