占位符文本溢出：IE10中的省略号不起作用 [英] Placeholder text-overflow:ellipsis in IE10 not working

问题描述

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

  input [placeholder] {
 text-overflow：ellipsis; 
 
  

解决方案

我遇到同样的问题并遇到来自Front End Tricks And Magic的这篇博客文章。博客的要点是，您可以在IE中的输入中进行省略，但只有输入具有只读属性。

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

HTML：

 < div class =long-value-input-container> 
< input type =text
 value =sdghkjsdghhjdfgjhdjghjdfhghjhgkdfgjnfkdgnjkndfgjknkclass =long- 
 value-inputreadonly /> 
< / div> 
  

CSS：

  .long-value-input {
 width：200px; 
 height：30px; 
 padding：0 10px; 
文本溢出：省略号; 
 white-space：nowrap; 
 overflow：hidden; 
 
 $ / code> 

JavaScript（使用jQuery）



  //使输入可编辑
 $（'.long-value-input'）.on（'click'，function（）{
 $ （this）.prop（'readonly'，''）; 
 $（this）.focus（）; 
}）
 
 //使输入只读
'（'.long-value-input'）.on（'blur'，function（）{
 $（this）.prop（'readonly'，'readonly'）; 
}）; 
  




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

解决方案

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

这篇关于占位符文本溢出：IE10中的省略号不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！