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

Question

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

However, now I have another problem that I cannot solve, which is related to the answer that I put in place.

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

When a user views the same code in a larger modal window, the ellipse is no longer valid, since it is possible to display user data. However, this makes the Data di completamento ( resumeStyleFinishDateLabel25 ) too wide, as shown below:

How to change CSS so that the div Data di completamento only wider than the text Data di completamento , and is located next to the start date - 01/2009 ? The text in the div can be different languages, which means different text lengths, so I can not use a fixed width for the div.

I tried changing the CSS display from table to inline-block , but this disables the ellipsis effect. I read CSS forums and SO threads, but I can't figure out how to solve this.

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

In this case, I would suggest using CSS3 flexbox , it supports ellipsis very well and makes markup a lot easier. IE10 + browser support .

DEMO: http://jsfiddle.net/cxpj7zaz/ [resize 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; } 

Answer 2

Instead of width: 100%; for .table_ellipsis you should use width: auto; .

A working example is 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>