Make div CSS "display: table-cell" only as wide as text in the div

Question

I asked this SO question yesterday to get the ellipsis working in my test form.

However, I now have another issue that I cannot solve, that relates to the answer I put in place.

When I have the users data displayed in a small preview, the ellipsis takes effect and is displayed to the user. This is done by using display: table-cell in the HTML. As shown below:

When the user views the same code in a larger modal window, the ellipsis is no longer in effect as there is room to display the users data. However, this makes the Data di completamento (resumeStyleFinishDateLabel25) too wide, as shown below:

How do I change the CSS so that the div of the Data di completamento is only as wide as the text Data di completamento and is positioned next to the start date - 01/2009? The text in the div can be different languages, meaning different text lengths, so I cannot use a fixed width to the div.

I have tried changing the CSS display from table to inline-block, but this disables the effect of the ellipsis. I have done some reading of CSS forums and SO threads, but I cannot think of a way to solve this myself.

I am hoping that someone can show me.

Here is my 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>

Here is my 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

I would suggest to use CSS3 flexbox in this case, it supports ellipsis very well, and makes the markup much simpler too. Browser support IE10+.

DEMO: http://jsfiddle.net/cxpj7zaz/ [resize the output frame and see]

---

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