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

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

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

【问题讨论】:

标签: 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 中。
      猜你喜欢
      • 1970-01-01
      • 2013-08-19
      • 2016-07-15
      • 1970-01-01
      • 1970-01-01
      • 2019-06-21
      • 1970-01-01
      • 2017-10-03
      相关资源
      最近更新 更多