Placeholder text-overflow:ellipsis in IE10 not wor

Question

I used below code for showing ellipsis if text length is more in a placeholder. It's working good in Chrome and Firefox. Where as in IE it's not working.

input[placeholder] {
    text-overflow:ellipsis;
}

Answer 1

Code here:

$('input[type=text]').attr('readonly', 'readonly')
.blur(function () {
   $(this).attr('readonly', 'readonly');
}).focus(function () {
   $(this).removeAttr('readonly');
});

work well for me.

Answer 2

From CSS-tricks: "text-overflow only occurs when the container's overflow property has the value hidden, scroll or auto and white-space: nowrap;.

Try adding this:

input[placeholder] {
    overflow: hidden;  
    text-overflow:ellipsis;
    white-space: nowrap;
}

Answer 3

I was having the same problem and came across this blog post from Front End Tricks And Magic that worked for me. The gist of the blog is that you CAN do an ellipsis in an input in IE, however only if the input has a readonly attribute.

Obviously in many scenarios we don't want our input to have a readonly attribute. In which case you can use JavaScript to toggle it. This code is take directly from the blog, so if you find this answer helpful you might consider checking out the blog and leaving a comment of appreciation to the author.

HTML:

<div class="long-value-input-container">
  <input type="text" 
    value="sdghkjsdghhjdfgjhdjghjdfhghjhgkdfgjnfkdgnjkndfgjknk" class="long-
    value-input" readonly />
</div> 

CSS:

.long-value-input {
  width: 200px;
  height: 30px;
  padding: 0 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

JavaScript (using jQuery)

// making the input editable
$( '.long-value-input' ).on( 'click', function() {
  $( this ).prop( 'readonly', '' );
  $( this ).focus();
})

// making the input readonly
$( '.long-value-input' ).on( 'blur', function() {
  $( this ).prop( 'readonly', 'readonly' );
});