CODEWITHSUNDEEP
cssinputinternet-explorer-11placeholderellipsis
Surendra Kumar B
Surendra Kumar B

Reputation: 118

Not able to set text ellipsis for input placeholder in IE11

I'm able to set the color of input placeholder text in IE11 (Windows 7) but I'm not able to set text overflow to ellipsis for input placeholder text.

Here is the jsfiddle to reproduce this issue (Please open this fiddle link in IE11 on windows 7) ,

https://jsfiddle.net/1nku0aty/3/

HTML

<input type="text" placeholder="longtextlongtextlongtextlongtextlongtext">

CSS

input {
  margin: 2em;
}
input:-ms-input-placeholder {
  text-overflow: ellipsis;
  overflow: hidden;
  color: red;
}

Can some one help on solving this?

Upvotes: 1

Views: 2587

Answers (2)

sam
sam

Reputation: 2125

There is a better answer to this question about IE10:

Placeholder text-overflow:ellipsis in IE10 not working

Basically, apparently it doesn't work unless you make the input field readonly, it is possible to do some hacky javascript to make it readonly except when you click it, but if you have the option of going 'eh whatever, it's IE11 and a minor glitch, who cares' you should probably take that...

Upvotes: 1

Tobias Glaus
Tobias Glaus

Reputation: 3628

Try it like this. That doesn't work in IE as usual.

input[placeholder]{
text-overflow:ellipsis;
}
input{
width:100px;
}
<input type="text" placeholder="loremipsumdolorsitametconsetetur">

Upvotes: 0

Related Questions