Machen div CSS "Anzeige: Tisch-Zelle" nur so breit wie Text in der div

Question

Ich fragte diese SO question gestern, um die Ellipse in meiner Testform zu arbeiten.

Allerdings habe ich jetzt ein anderes Problem, das ich nicht lösen kann, das bezieht sich auf die Antwort, die ich einrichte.

Wenn die Benutzerdaten in einer kleinen Vorschau angezeigt werden, werden die Auslassungszeichen wirksam und dem Benutzer angezeigt. Dies geschieht mithilfe von display: table-cell im HTML. Wie unten gezeigt:

Wenn der Benutzer den gleichen Code in einem größeren modalen Fenster sieht, sind die Ellipsen nicht in Wirkung mehr, da es Raum, um die Benutzer Daten anzuzeigen ist. Dies macht jedoch die Data di completamento (resumeStyleFinishDateLabel25) zu breit, wie unten dargestellt:

Wie kann ich die CSS ändern, so dass der div derData di completamentonur so breit wie der Text istData di completamentound ist neben dem Startdatum positioniert -01/2009? Der Text im div kann verschiedene Sprachen haben, was unterschiedliche Textlängen bedeutet, also kann ich keine feste Breite zum div verwenden.

Ich habe versucht, die CSS-Anzeige von table zu inline-block zu ändern, aber dies deaktiviert die Wirkung der Ellipse. Ich habe einige CSS-Foren und SO-Threads gelesen, aber ich kann mir keinen Weg vorstellen, wie ich das selbst lösen könnte.

Ich hoffe, dass mir jemand zeigen kann.

Hier ist mein 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> 

Hier ist meine 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

würde ich vorschlagen, CSS3 flexbox in diesem Fall zu verwenden, unterstützt es ellipsis sehr gut, und macht das Markup viel zu einfacher. Browserunterstützung IE10 +.

DEMO: http://jsfiddle.net/cxpj7zaz/ [die Ausgangsrahmen die Größe und sehen]

---

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

Answer 2

Statt width: 100%; für .table_ellipsis sollten Sie width: auto; verwenden.

Arbeitsbeispiel here:

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

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

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