CSS Table Cell Alignment And Ellipsis Not Working

I have some HTML code that is not hidden and cut off using the CSS ellipsis. I have tried many things to fix this issue, but nothing works for me (and it is killing me I cannot fix

Solution 1:

There is a problem of the CSS table structure, you have some table cells stay directly under the element that is also set to table cell, which is invalid. You can wrapped the inner table cell elements into a container and set it as display:table, which would fix the issue.

It's this part:

<div class="table">
    <div class="resumeStyleStandardLabelContent25">
        <div class="ellipsis">01/2009 Date d'achevement</div>
    </div>
    <div class="resumeStyleStandardLabelContent25">
        <div class="ellipsis">11/2011 (2 annees, 10 mois)</div>
    </div>
</div>

In general the correct CSS table layout is like this, but row isn't needed if there is only one row.

<div style="display:table">
    <div style="display:table-row">
        <div style="display:table-cell">
            ...

When you use CSS text-overflow:ellipsis in table, it needs to work with fixed table layout, and has width value set, either fixed or percentage are both fine.

It's like this:

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

Lastly:

Remove all the float properties from the table cells, they don't work together.

Here is the updated code snippet:

body {width: 500px;} /*for demo only*/

.livePreview_resumeWrapper1 {
    border: 1px solid #000;
    box-shadow: 10px 10px 5px 0px #888888;
    direction: ltr;
    padding: 20px;
    width: 93%;
}
.resumeStyleWrapper25 {
    border-spacing: 0px 0px;
    display: table;
    font-family: verdana;
    font-size: 12px;
    width: 100%;
}
.resumeStyleOptimisedContainer25 {
    /* THIS CLASS ALTERNATES BETWEEN A ROW AND A NON-ROW DEPENDING ON THE STYLE REQUIREMENTS */
    background-color: #000;
    display: table-cell;
    font-weight: bold;
    min-width: 149px;
    padding: 2px;
    text-transform: uppercase;
    vertical-align: top;
    width: 18%;
}
.resumeStyleStandardHeadings25 {
    background-color: #000;
    color: #fff;
    display: table-cell;
    font-weight: bold;
    min-width: 149px;
    padding: 2px;
    text-transform: uppercase;
    vertical-align: top;
    width: 18%;
}
.resumeStyleStandardContainer25 {
    padding-left: 5px;
    width: 100%;
}
.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;
}
.resumeStyleDateStartContent25 {
    direction: ltr;
    display: table-cell;
    /* float: left; */
    padding: 2px;
    text-align: left;
    vertical-align: top;
    width: 20%;
}
.table {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.resumeStyleFinishDateLabel25 {
    background-color: #fff;
    color: #000;
    direction: ltr;
    display: table-cell;
    /* float: left; */
    font-weight: bold;
    padding: 2px;
    padding-right: 10px;
    text-align: left;
    vertical-align: top;
}
.resumeStyleDateFinishContent25 {
    direction: ltr;
    display: table-cell;
    /* float: left; */
    padding: 2px;
    text-align: left;
    vertical-align: top;
}

<div id="live_preview" class="livePreview_resumeWrapper1">
    <div class="resumeStyleWrapper25">
        <div class="resumeStyleOptimisedContainer25">
            <div class="resumeStyleStandardHeadings25">Emploi Détails d'histoire</div>
        </div>
        <div class="resumeStyleWrapper25">
            <div class="resumeStyleStandardTableRow25">
                <div class="resumeStyleStandardContainer25">
                    <div class="resumeStyleStandardTableRow25">
                        <div class="resumeStyleStandardLabels25">employeur</div>
                        <div class="resumeStyleStandardLabelContent25">french</div>
                    </div>
                    <div class="resumeStyleStandardTableRow25">
                        <div class="resumeStyleStandardLabels25">Date de demarrage</div>
                        <div class="resumeStyleStandardLabelContent25">
                            <div class="table">
                                <div class="resumeStyleStandardLabelContent25">
                                    <div class="ellipsis">01/2009 Date d'achevement</div>
                                </div>
                                <div class="resumeStyleStandardLabelContent25">
                                    <div class="ellipsis">11/2011 (2 annees, 10 mois)</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Or, view the JsFiddle demo, so you can resize the frame easily to check:

Working Demo Here