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

【问题标题】：Placeholder text-overflow:ellipsis in IE10 not working占位符文本溢出：IE10 中的省略号不起作用
【发布时间】：2014-08-20 13:22:38
【问题描述】：

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

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

【问题讨论】：

这是某种公认的答案，也许它也适合这个问题：stackoverflow.com/questions/18691919/…

标签： html css placeholder

【解决方案1】：

代码在这里：

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

对我来说很好。

【讨论】：

【解决方案2】：

我遇到了同样的问题，遇到了对我有用的this blog post from Front End Tricks And Magic。该博客的要点是您可以在 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' );
});

【讨论】：

【解决方案3】：

来自CSS-tricks：“文本溢出仅在容器的溢出属性具有隐藏、滚动或自动和空白的值时发生：nowrap;。

尝试添加这个：

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

【讨论】：

尝试了上述步骤。仍然是同样的问题 - 仅在 IE 中。