Geek Answers Handbook

How to get ellipsis with vertical text using HTML-CSS tables?

I want to display text in a small space where there can only be two lines. When the text is too long, I look for a way to get an ellipsis at the end of the second line.

enter image description here

I used the table, but it does not work, I can not limit the height of the cell.

<td style="overflow-x: hidden;overflow-y:hidden;text-overflow: ellipsis;max-height:50px">text</td>
+6
source share
2 answers

I created a fiddle with a demo: http://jsfiddle.net/sandro_paganotti/N35Hw/ . Unfortunately, you need to know in advance if the text overflows to display the before selector.

HTML

 <p><span> lalla al lalla lalla la lallalla llal alla alla alllla la la al allla lalall alla alla alla alla alla lla alla lalla lalla alla alla allalla lla llala lall lalla lal </span></p>

CSS

 p{ width: 200px; border: 5px solid black; position: relative; } p:after{ content: '...'; display: block; position: absolute; bottom: 6px; right: 10px; background: #FFF; } span{ display: block; margin: 10px; height: 50px; overflow: hidden; }
+2
source

The last time I encountered the same problem, I went for the jQuery variant. It is packaged in a plugin . I don’t remember that I found only something satisfying only in CSS. But here you have examples of what you can achieve, I do not believe that it can get much further.

EDIT: Have you seen this example ? It basically fakes dots using <span>...</span> . A dirty unreasonable hack, but it can satisfy your needs.

0
source

More articles:


All Articles