0

I have a <div>Lorem ipsum dolor sit amet</div> that contains a string in which can wrap to more than 2 rows, I want to only show two rows, and here's what I've done:

font-size: 12px;
line-height: 1.3em;
min-height: 2.6em;
max-height: 2.6em;
text-overflow: ellipsis;

The only problem is, ellipsis will only show if my text looks like:

pharetra
adipiscing

Into

pharetra
adipi...

But it won't work if my text looks like:

Sed
ipsum
risus

Actual result:

Sed
ipsum

What I want:

Sed
ipsum...

Here's the html snippet:

<button class="foo" title="bar">
    <img src="data:image/svg+xml;base64," height="40" width="40" style="background-color: rgb(57, 153, 198);">
    <div style="width: 70.26px; font-size: 12px; line-height: 1.3em; min-height: 2.6em; max-height: 2.6em;
text-overflow: ellipsis;">Some text to be truncated</div>
</button>
Derek Li
  • 3,089
  • 2
  • 25
  • 38

0 Answers0