0

I have a table (not <table> but made of <div>s) showing user-defined text. The text can be displayed in up to three text rows (inside a single table cell) and usually fits nicely. It can look like

Sed ut perspiciatis         Nor again is there anyone who loves or 
  unde omnis iste    X120    pursues or desires to obtain pain of   
   natus error                   itself, because it is pain

However, sometimes the text doesn't fit and then it must be shortened. I can clip it using overflow: hidden, but I'd like to display ellipsis when this happens. However, text-overflow: ellipsis doesn't work and according to css-tricks it's not expected to:

Note that text-overflow only occurs when the container's overflow property has the value hidden, scroll or auto and white-space: nowrap.

I obviously can't use white-space: nowrap as I don't want a single line text.

How can I show the ellipsis, when the text overflows, while otherwise keeping the behavior (wrapping in up to three lines and vertical and horizontal centering)?

This question is not a real duplicate as using display: -webkit-box doesn't allow me to center the text both horizontally and vertically.

maaartinus
  • 44,714
  • 32
  • 161
  • 320
  • Can you please share a little working example please ? – johannchopin Feb 27 '20 at 23:10
  • @johannchopin *How could I when nothing I tried worked?* I used a `div` with something like `overflow: hidden; display: table-cell; width: ...; height: ...; text-align: center; vertical-align: middle;`, but couldn't get the ellipsis. – maaartinus Feb 28 '20 at 01:21

0 Answers0