mercredi 1 juillet 2015

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 such a simple issue). I have read all the SO posts about the css ellipsis.

Here is a visual representation of what I have:

enter image description here

As shown the 11/2001 (2 annees, 10 mois) is dropped to the next line and the ellipsis does not take effect.

I am trying to keep the 11/2001 (2 annees, 10 mois) next to the prompt Date d'achevement and to be cut off (hidden) with the ellipsis if the value is too long, as it is in this case.

Here is my HTML

<div class="resumeStyleStandardTableRow25">
    <div class="resumeStyleStandardLabels25">Date de demarrage</div>
    <div class="resumeStyleStandardLabels25">
        <div class="resumeStyleDateStartContent25">01/2009</div>                
        <div class="resumeStyleFinishDateLabel25">Date d'achevement</div>
        <div class="resumeStyleDateFinishContent25">
            <div class="ellipsis">11/2011 (2 annees, 10 mois)</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;
}

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

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

Can anyone point out what I am doing incorrectly?

Aucun commentaire:

Enregistrer un commentaire