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

Question

昨天我问了这个问题,以便在我的测试表格中使用省略号.

但是,我现在有另一个我无法解决的问题,这个问题与我提出的答案有关.

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

当用户在较大的模态窗口中查看相同的代码时,省略号不再有效,因为有空间显示用户数据.但是,这会使Data di completamento(resumeStyleFinishDateLabel25)太宽,如下所示:

如何更改CSS以使其div Data di completamento 仅与文本一样宽 Data di completamento 并且位于开始日期旁边 - 01/2009？div中的文本可以是不同的语言,意思是不同的文本长度,所以我不能使用固定宽度的div.

我已经尝试将CS​​S显示更改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

我建议flexbox在这种情况下使用CSS3，它支持得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;
}