css - 在 CSS 表格单元格元素中显示省略号

Question

我有一个 100% 宽度的表格，其中包含多个单元格。我希望此单元格之一始终在一行 white-space: nowrap 中显示其内容，并且如果内容超出表格单元格 text-overflow，则在行尾显示省略号: 省略号.

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

我只是不知道如何解决这个问题:

我的 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;
}

还有一个用于直接测试的 fiddle :

http://jsfiddle.net/67B6G/

Answer 1

是this look like what you're after ？

<强> updated

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;    
}