Truncating Text to 3 Lines in IE

Question

I have a simple span tag with content that spans multiple lines, and I have figured out how to cap that off at 3 lines, and then follow up with an ellipsis (...)

The problem is, it doesn't work in IE11, and I would like to. Here's my code:

HTML:

<span class="itemLabel">
     This is Line 1<br/>
     This is Line 2<br/>
     This is Line 3<br/>
     this is Line 4<br/>
     this is Line 5<br/>
</span>

CSS:

.itemLabel{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: 11px;
}

Now the content of the span is being populated dynamically, so I have ZERO control of the amount of text that is put into the span, and we have a set width of 180px on an anchor tag that surround this span AND a product image, so I am unable to simply "don't use as many break tags", I'm putting them there as an example that even though there are 5 lines present, the CSS will cut the span off at 3 maximum.

How can I achieve this same display in IE?

There is no support or alternative for it in ie https://developer.mozilla.org/en-US/docs/Web/CSS/box-flex — Pete, Mar 28 '17 at 13:41
@hungerstar I'm going to assume you didn't read the reason WHY I put the break tags in the issue. — Murphy1976, Mar 28 '17 at 13:43
I think the best you can hope for is something like this: https://jsfiddle.net/9ruzfdxj/1 — Pete, Mar 28 '17 at 13:52
There is no cross browser CSS solution, so check this possible duplicate [applying-an-ellipsis-to-multiline-text](http://stackoverflow.com/questions/33058004/applying-an-ellipsis-to-multiline-text) — Asons, Mar 28 '17 at 14:14

score 0 · Answer 1 · answered Apr 05 '17 at 12:39

Since there is no cross browser solution, I needed some kind of way to limit the textual output in a user friendly design. The back end [database] exports three (3) distinct possible pieces of information, title, author, price (The problem was that the title and/or author would run on to multiple lines).

The solution I got was to simply break these three pieces of information into three separate spans, and apply the cross-browser solution of the word-wrap/ellipsis to each line. I presented this to the client, explained the limitations and they were fine with this solution.

It seems, more and more that IE/Edge is becoming less and less reliable when it comes to newer advancements in UI/UX and responsive design. Our last check was that only 3% of our customers were still using IE/Edge as their browser of choice.

Truncating Text to 3 Lines in IE

1 Answers1