How to make input element text-overflow:ellipsis on IE?

Question

I found my

fiddle only work on Chrome and FF, I don't know why it don't have the ellipsis effect on IE? Hope someone can help on this, it would be better if you can solve it by a CSS way.

BTW, It seems the div has text-overflow:ellipsis effect on both IE and Chrome.

css:

.ellip {
  white-space: nowrap;
  width: 200px;
  overflow: hidden;
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

html:

<input type="text" class="ellip" value="abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz">
<div class="ellip">abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</div>

ok. I'll update the code into the question.t The reason i provided a fiddle here is for you to directly open it to see the different behavior in IE and Chrome — huan feng, Apr 20 '15 at 05:49
possible duplicate of [How to use text-overflow ellipsis in an html input field?](http://stackoverflow.com/questions/9771795/how-to-use-text-overflow-ellipsis-in-an-html-input-field) — Kawinesh S K, Apr 20 '15 at 05:49
@huanfeng there is a reason why it doesnt have a solution which is expained there — Kawinesh S K, Apr 20 '15 at 05:54
@KawineshSK Sorry, I don't read that there. Really, this is a similar question but explicitly about IE, this is **not** a duplicate. — martin, Apr 20 '15 at 05:55
@KawineshSK so we don't a solution in IE? BTW, the accept answer in your link doesn't say it worked well in Chrome... — huan feng, Apr 20 '15 at 05:59

svdb · Answer 1 · 2015-04-20T12:00:40.140

1

.ellip:before {
content: ''; /* IE9 ellipsis fix */
}

Example: https://jsfiddle.net/svdbco/s1x0qx1a/

IE8 screenshot:

enter image description here

IE11 screenshot:

enter image description here

edited Apr 20 '15 at 12:00

answered Apr 20 '15 at 07:21

svdb

36
4

1

it worked for button in your screenshot, but it doesn't work for input type="text" element. – huan feng Apr 20 '15 at 11:37

score -3 · Answer 2 · answered Apr 20 '15 at 07:11

-3

what effect you expect to see???

use this and see effect:

.ellip {
    white-space: nowrap;
    width: 200px;
    overflow: hidden;
    -o-text-overflow: clip;
    -ms-text-overflow: clip;
    text-overflow: clip;
 }

answered Apr 20 '15 at 07:11

hossein ketabi

480
7
19

I need the ellipsis effect – huan feng Apr 20 '15 at 07:27
what is your browser version?? it work in IE version 6 to upper – hossein ketabi Apr 20 '15 at 08:29
I don't need the clip effect, i need the ellipsis effect, IE version 11 – huan feng Apr 20 '15 at 08:42

How to make input element text-overflow:ellipsis on IE?

2 Answers2