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:

<divclass="table"><divclass="resumeStyleStandardLabelContent25"><divclass="ellipsis">01/2009 Date d'achevement</div></div><divclass="resumeStyleStandardLabelContent25"><divclass="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.

<divstyle="display:table"><divstyle="display:table-row"><divstyle="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: 10px10px5px0px#888888;
    direction: ltr;
    padding: 20px;
    width: 93%;
}
.resumeStyleWrapper25 {
    border-spacing: 0px0px;
    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;
}

<divid="live_preview"class="livePreview_resumeWrapper1"><divclass="resumeStyleWrapper25"><divclass="resumeStyleOptimisedContainer25"><divclass="resumeStyleStandardHeadings25">Emploi Détails d'histoire</div></div><divclass="resumeStyleWrapper25"><divclass="resumeStyleStandardTableRow25"><divclass="resumeStyleStandardContainer25"><divclass="resumeStyleStandardTableRow25"><divclass="resumeStyleStandardLabels25">employeur</div><divclass="resumeStyleStandardLabelContent25">french</div></div><divclass="resumeStyleStandardTableRow25"><divclass="resumeStyleStandardLabels25">Date de demarrage</div><divclass="resumeStyleStandardLabelContent25"><divclass="table"><divclass="resumeStyleStandardLabelContent25"><divclass="ellipsis">01/2009 Date d'achevement</div></div><divclass="resumeStyleStandardLabelContent25"><divclass="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