css - div 表格单元格和溢出不起作用

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

查看您的代码结构，您需要显示属性值 inline-block for .table_cell for the overflow 值生效。否则，您将不得不改变周围的事物。

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