Placeholder text-overflow:ellipsis in IE10 not working

问题

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;
}

回答1:

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' );
});

回答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;
}

回答3:

Code here:

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

work well for me.

来源：https://stackoverflow.com/questions/24485598/placeholder-text-overflowellipsis-in-ie10-not-working

标签

html

css

placeholder