占位符文本溢出:省略在IE10不工作

Question

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

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

Answer 1

我也有同样的问题，我看到了这篇来自前端技巧和魔术的博客文章，它对我很有用。这篇博客的要点是，你可以在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' );
});

Answer 2

From CSS-tricks: "text-overflow仅在容器的overflow属性值为hidden, scroll或auto且white-space: nowrap;

试着添加这个:

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

Answer 3

此处代码:

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