html - 使 div CSS "display: table-cell"仅与 div 中的文本一样宽

Question

我问这个SO question昨天让省略号在我的测试表单中起作用。

但是，我现在有另一个我无法解决的问题，它与我给出的答案有关。

当我在小预览中显示用户数据时，省略号生效并显示给用户。这是通过在 HTML 中使用 display: table-cell 来完成的。如下图:

当用户在更大的模态窗口中查看相同代码时，省略号不再有效，因为有空间显示用户数据。然而，这使得 Data di completamento (resumeStyleFinishDateLabel25) 太宽了，如下所示:

如何更改 CSS 以便 Data di completamento 的 div 仅与文本一样宽 Data di completamento 并位于开始日期旁边 - 01/2009? div 中的文本可以是不同的语言，意味着不同的文本长度，所以我不能对 div 使用固定宽度。

我曾尝试将 CSS 显示从 table 更改为 inline-block，但这会禁用省略号的效果。我已经阅读了一些 CSS 论坛和 SO 线程，但我想不出自己解决这个问题的方法。

我希望有人能告诉我。

这是我的 HTML:

<div class="resumeStyleStandardTableRow25">
    <div class="resumeStyleStandardLabels25">Decorrenza</div>
    <div class="resumeStyleStandardLabelContent25">
        <div class="table_ellipsis">
            <div class="resumeStyleDateStartContent25">01/2009</div>
            <div class="resumeStyleFinishDateLabel25">
                <div class="ellipsis">Data di completamento</div>
            </div>
            <div class="resumeStyleDateFinishContent25">
                <div class="ellipsis_finishDate">11/2011 (2 anni, 10 mesi)</div>
            </div>
        </div>
    </div>
</div>

这是我的 CSS:

.resumeStyleStandardTableRow25 {
    display: table-row;
}

.resumeStyleStandardLabels25 {
    direction: ltr;
    display: table-cell;
    font-weight: bold;
    height: 100%;
    min-height: 25px;
    overflow: hidden;
    padding: 2px;
    padding-right: 10px;
    text-align: right;
    vertical-align: top;
    white-space: nowrap;
}

.resumeStyleStandardLabelContent25 {
    direction: ltr;
    display: table-cell;
    height: 100%;
    min-height: 25px;
    overflow: hidden;
    padding: 2px;
    text-align: left;
    vertical-align: top;
    width: 100%;
}

.table_ellipsis {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.resumeStyleDateStartContent25 {
    direction: ltr;
    display: table-cell;
    padding: 2px;
    text-align: left;
    vertical-align: top;
    
    width: 75px;
}

.resumeStyleFinishDateLabel25 {
    background-color: #fff;
    color: #000;
    direction: ltr;
    display: table-cell;
    font-weight: bold;
    padding: 2px;
    padding-right: 10px;
    text-align: right;
    vertical-align: top;

    background-color: lime;

}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.resumeStyleDateFinishContent25 {
    direction: ltr;
    display: table-cell;
    padding: 2px;
    text-align: left;
    vertical-align: top;


}

.ellipsis_finishDate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    background-color: yellow;
}

Answer 1

在这种情况下，我建议使用 CSS3 flexbox，它很好地支持 ellipsis，并且使标记也更简单。浏览器支持 IE10+。

演示:http://jsfiddle.net/cxpj7zaz/ [调整输出框的大小并查看]

---

<div class="flexbox">
    <div class="item">Decorrenza 01/2009</div>
    <div class="item">
        <div class="ellipsis">Data di completamento</div>
    </div>
    <div class="item">
        <div class="ellipsis">11/2011 (2 anni, 10 mesi)</div>
    </div>
</div>

---

.flexbox {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.item {
    min-width: 0;
    margin: 5px;
    border: 1px solid grey;
}
.item:nth-child(1) { /*DO NOT SHRINK*/
    -webkit-flex: 0 0 auto;
        -ms-flex: 0 0 auto;
            flex: 0 0 auto;
}
.ellipsis {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    background: yellow;
}