占位符文本溢出：省略号在 IE10 中不起作用

如果占位符中的文本长度较长，我使用下面的代码显示省略号。 它在 Chrome 和 Firefox 中运行良好。在 IE 中它不起作用。

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

我遇到了同样的问题并遇到了这篇博文来自前端技巧与魔法 https://frontendtricksandmagic.wordpress.com/2015/03/07/how-to-make-text-overflow-ellipsis-work-for-inputs-in-ie/这对我有用。该博客的要点是，您可以在 IE 中的输入中执行省略号，但前提是该输入具有只读属性。

显然在许多情况下我们不希望我们的输入具有只读属性。在这种情况下，您可以使用 JavaScript 来切换它。该代码直接取自博客，因此如果您发现此答案有帮助，您可以考虑查看该博客并向作者留下感谢评论。

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