7

I want to display a text in a small space where only two lines can fit. When the text is too long I'm looking for a way to obtain an ellipsis at the end of the second line.

enter image description here

I used a table but it doesn't work, I can't limit the cell height.

<td style="overflow-x: hidden;overflow-y:hidden;text-overflow: ellipsis;max-height:50px">text</td>
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Cherif
  • 5,223
  • 8
  • 33
  • 54
  • 1
    Have you tried a div inside the td? – Lee Taylor Apr 02 '13 at 20:53
  • 2
    Seems to be impossible with pure CSS. See this thread for some possible solutions: http://stackoverflow.com/questions/6222616/with-css-use-for-overflowed-block-of-multi-lines – metadept Apr 02 '13 at 22:34

2 Answers2

2

I've created a fiddle with a demo: http://jsfiddle.net/sandro_paganotti/N35Hw/. Unfortunately you have to know in advance if the text is going to overflow in order 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;
}
Sandro Paganotti
  • 2,295
  • 16
  • 12
  • 1
    The height of the `span` should be set in em, to fit whatever font size you have. – TKrugg Apr 02 '13 at 22:54
  • You can refine this solution with jQuery calculating if a element is going to overflow, see https://stackoverflow.com/questions/26629506/detect-css-text-overlow-ellipsis-with-jquery#answer-35936017 – Matteo Conta May 25 '17 at 13:39
0

Last time I encountred the same problem, I went for a jQuery option. It's packaged in a plugin. I don't remember I found anything satisfying in CSS only. But you've got here examples of what you can achieve, I don't believe it can get much further.

EDIT: have you seen this example? It basically fakes the dots with a <span>...</span>. Dirty unadvised hacking but it can suit your needs.

TKrugg
  • 2,255
  • 16
  • 18