text-overflow: ellipsis not working in IE10

Question

I have a div wrapper to wrap some text which I want to ellipse out when it exceeds the wrapper width. Below is my HTML and CSS it works perfectly fine in chrome. Any one explain whats going wrong with IE10.

HTML

<div id="wrapper">
    <div class="my-title">Lorem, Ipsum 
                         <br>Our TYPE
                         <br>Confirmed
                         <br>simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
    </div>
  </div>

CSS

.my-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: normal;
    width: 100%;
}

#wrapper {
    width: 500px
}

PLUNKER LINK

http://plnkr.co/edit/iAO3ZMT3IM5wwoN83QlY?p=preview

IE, Edge are simply bad, really bad browsers built by mistake. — Roko C. Buljan, Aug 26 '15 at 21:25
Try removing the `width` value or else use a pixel value instead of percentage — Jackson, Aug 26 '15 at 21:27
Multiline text with
tags is cause - even IE11 can't display it propely, BUT, if you remove line breaks - it works. :) (not sure about IE10, though) — sinisake, Aug 26 '15 at 21:28
@RokoC.Buljan the link provided definitely is not the one which will work in my div which has
element. — Prashanth, Aug 26 '15 at 21:45
@Yes, it in the same. IF you read trough all the answers and comments you'll see that IE is buggy about `
`. What's not clear? Is there something I'm missing? So it's a duplicate of http://stackoverflow.com/questions/14664195/text-overflowellipsis-doesnt-work-on-ie?lq=1 (since basically it's about the same issues in IE) — Roko C. Buljan, Aug 26 '15 at 21:48
@RokoC.Buljan The reason for me to use
is to add text in next line. If ever any line exceeds the wrapper width it needs to add ellipsis. I have also tried to create div for each individual line which didn't work. — Prashanth, Aug 26 '15 at 21:53
@Prashanth have you seen the comments on that page where it says that if you use `
` it'll **not work in IE**? — Roko C. Buljan, Aug 26 '15 at 21:54
@RokoC.Buljan Got it. Do you have any solution to show the text in next line and apply the ellipsis if ever it exceeds the wrapper width ? — Prashanth, Aug 26 '15 at 21:57
@Prashanth hmm I said goodbye to such IE issues a long time ago... since most of them cost my company a lot of *my time*. I'm not sure it's possible without hacks - I'm also quite sure that similar questions are already here on SO. Ellipsis is a really common thing. — Roko C. Buljan, Aug 26 '15 at 21:59
@RokoC.Buljan Thank you for the help. Unfortunately we need to deal with IE and need to find if there is any way of doing it. — Prashanth, Aug 26 '15 at 22:01
@RokoC.Buljan Appreciate your patient replies.Tried making the
to separate div's unfortunately it didn't work. As far as JS haven't thought of going there before giving up on a CSS solution. — Prashanth, Aug 26 '15 at 22:11
@Prashanth I tried every possible solution I could find (without using brain) and really none worked in IE and even Edge. If I figure out some nice trick I'll keep you informed. — Roko C. Buljan, Aug 26 '15 at 22:13
@Prashanth do you use any PHP or other server-size stuff on your website? I know that it's not a solution in the world of responsive websites... but you could manually trim clamp the text after N characters and add `…` ellipsis. Or simply find a solution that uses jQuery or plain JS. — Roko C. Buljan, Aug 26 '15 at 22:28
Here is some kind of accepted answer and maybe it is appropriate to this problem also: https://stackoverflow.com/questions/18691919/ie10-text-overflow-ellipsis-not-working — Nezir, Sep 26 '18 at 07:51

score 0 · Answer 1 · answered Aug 26 '15 at 22:09

0

You could just eliminate the page breaks and put each of the lines in their own div such as this.

<div style="width: 200px;">
  <div>Lorem, Ipsum</div>
  <div>Our TYPE</div>
  <div>Confirmed</div>
  <div class="my-title">
    simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
  </div>
</div>

answered Aug 26 '15 at 22:09

John Fink

1
1

Which is basically the same as this answer http://stackoverflow.com/a/31035811/383904 – Roko C. Buljan Aug 26 '15 at 22:23
Thanks. That will work but somehow my data is getting generated by backend which I need to be using with
. I will take that answer if there is nothing else I am missing with CSS may be this is the only way in IE10. @RokoC.Buljan really appreciate your passion. – Prashanth Aug 26 '15 at 22:32

text-overflow: ellipsis not working in IE10

1 Answers1