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

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

Answer 2

这是一种不使用table-layout: fixed来实现它的方法，它允许你使用jQuery保持动态宽度。

HTML：

<div class="table">
    <div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
    <div class="right">Lorem Ipsum</div>
</div>

在CSS中，您使用标准省略号代码，但添加max-width: 0（正如here解释的实际table元素）：

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

.left, .right {
    display: table-cell;
    padding: 0 5px 0 5px;

    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

如果你停在那里，你最终会让每个孩子div占据父母div总宽度的50％，所以你仍然不适合内容动态宽度。为了解决这个问题，我调整this code, which calculates the width of the text in an element,来计算宽度，然后使用它来动态设置右列的宽度。然后左列将具有省略号。

// Calculate width of text from DOM element or string. By Phil Freo <http://philfreo.com>
$.fn.textWidth = function(text, font) {
    if (!$.fn.textWidth.fakeEl) $.fn.textWidth.fakeEl = $('<span>').hide().appendTo(document.body);
    $.fn.textWidth.fakeEl.text(text || this.val() || this.text()).css('font', font || this.css('font'));
    return $.fn.textWidth.fakeEl.width();
};

$('.right').on('input', function() {
    var $width = $(this).textWidth(); // Get width of text
    $width += 10; // Add left and right padding
    $(this).width($width); // Set width
}).trigger('input');

请注意，上述代码要求您考虑padding;否则，右列也会有省略号。这是一个fiddle。

要在具有多行的表中使用它，您可以修改列中单元格的jQuery迭代，并将列的宽度设置为列中最宽单元格的必需宽度。或者，如果你知道哪一个是最宽的，你可以直接指向jQuery来获得它的宽度。

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

2 个答案: