在CSS table-cell元素中显示省略号

Question

我有一个100%宽度的表包含几个单元格.我希望其中一个单元格始终在一行中显示其内容,white-space: nowrap并在内容超出表格单元格时在行尾显示省略号text-overflow: ellipsis.

我遇到的问题是,当达到单元格内容时,表格将停止收缩.因此,单元格的最小宽度将始终是其内容的宽度,而表格将作为整体推出.

我只是想不通如何解决这个问题:

我的HTML:

<div class="otrCompactView">
    <div class="otrLastEditTable">
        <div class="otrLastEditRow">
            <div class="otrLastEditor">LastEditor</div>
            <div class="otrLastEdited">LastModified</div>
        </div>
    </div>
    <div class="otrTitleRow otrRow">
        <div class="otrTitle">Title asdasdasdas asd asd asd asdas as asd </div>
    </div>
    <div vlass="otrTaskRow otrRow">
    </div>
    <div class="otrColumnsRow otrRow">
        <div class="otrColumns"></div>
    </div>
</div>

我的CSS:

.otrCompactView {
    display: table;
    background: yellow;
    width: 100%;
    height: 100%;
}

.otrRow {
    display: table-row;
}

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

.otrLastEditRow {
    display: table-row;
}

.otrLastEditor {
    display: table-cell;
}

.otrLastEdited {
    display: table-cell;
    text-align: right;
}

.otrTitle {
    border: 1px dotted red;
    min-width: 50px;
    white-space: nowrap;
}

并且是直接测试的小提琴:

http://jsfiddle.net/67B6G/

Answer 1

难道这看起来像你以后？

更新

HTML

 <div class='table'>
    <div class='row'>
        <div class='cell'>Something quite long</div>  
    </div>
    <div class='row'>
        <div class='cell'>
            here is some moreSomething quite long that should exceed the table cell.Something quite long that should exceed the table cell.
        </div>          
    </div>
</div>

CSS

.table{
    margin:0;
    padding:0;
    display:table;
    table-layout: fixed;
    width:100%;
    max-width:100%;
}
.row{
    display:table-row;
}
.cell{
    display:table-cell;
    border:1px solid grey;
}
.cell:last-child{
    white-space: nowrap;
    overflow:hidden;
    text-overflow: ellipsis;    
}