0

For the first time ever I had to use the text-overflow: ellipsis property (ASP. MVC 4 application using Bootstrap and Kendo). It all worked as expected, except when I looked at the page on a Win 8.1 machine running IE11, where the long text is not cut off at all and thus the layout gets broken. The thing is, when I look at the same page on IE11 (same version) on my development machine (Win 7), it works flawlessly. It also works just fine in Chrome and Firefox.

I tried setting and removing other properties (white-space: nowrap, overflow: hidden, ms-text-overflow, width, display: block) to no avail, nothing changes this discrepancy. I tested the Win 8 behavior on two machines, both exhibit this. Is this a known bug? Are the IE11 versions for Win7/8 really different? If not, what could be causing this? The only thing different other than Win8 is that the Win 8 machines called the site remotely, it was running locally on the Win 7 machine.

Jatin
  • 3,065
  • 6
  • 28
  • 42
janb
  • 360
  • 5
  • 16
  • Please include your code in the question. – TylerH Mar 24 '14 at 18:17
  • what code? I mentioned I tried setting/not setting various properties along with it (and listed them), so there is no ONE piece of code that doesn't work. I hardly have to tell you what the syntax looks like. This is not a "is the code correct" type of question. If it was syntactically wrong it wouldn't work in other browsers. Its either a browser issue or something with Bootstrap/Kendo, but I can hardly post the full library code, can I? ;) – janb Mar 24 '14 at 20:28
  • The code you have tried so far. We don't expect you to post an entire library of code, but the relevant code is kind of mandatory for code-specific problems here at StackOverflow. Just because *you* think you've tried everything doesn't mean you actually have. – TylerH Mar 24 '14 at 20:33
  • For further information, see the [XY Problem](http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem/66378#66378). – TylerH Mar 24 '14 at 20:35
  • TylerH, please, if you have nothing useful to reply, don't. This is not a XY problem. text-overflow: ellipsis IS undoubtedly the right tool for the job. The question is not about whether it is, it is about why it doesn't work in IE11 Win8 when it does work in IE11 Win7. Providing one code-snippet of a simple css selector setting a few properties won't help answering the question at hand. Especially as I already tried several additional properties, so I'd have to give a dozen code-snippets to prevent suggestions to use one of those properties. Which is why I gave the list of properties I tried. – janb Mar 24 '14 at 20:59
  • It's a variant of an XY Problem; you think the solution to your problem is related to one specific thing, when in fact in could really be a number of other things. Don't ask about your solution, ask about the problem. But I will parrot you: if you have nothing useful to include in your question, don't ask it. – TylerH Mar 24 '14 at 21:01
  • It's a CSS question, it could be COUNTLESS of things outside the code snippet you want to see. You'd have no idea anyways what kind of properties get set elsewhere in the codebase. That's not the point. This is not a coding question asking for the right coding solution for a problem. It's a question about discrepancies between two installations of IE11 resulting in two different displays for the same piece of code. – janb Mar 24 '14 at 21:04

1 Answers1

1

For a simple sample to work with, try

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_js_text-overflow

In Chrome, using the text-overflow:ellipsis makes all 4 lines end in ellipses.

In IE11 (under Windows8.1), only the very first line gets an ellipsis.

A comment at text-overflow:ellipsis doesn't work on IE states that "Note: IE11 (and probably below) will not work with this if there are <br> in front of the text! "

Community
  • 1
  • 1
Jens Fiederer
  • 420
  • 4
  • 7