Html 占位符文本溢出:IE10中的省略号不起作用
如果占位符中的文本长度更大,我使用下面的代码来显示省略号。 它在Chrome和Firefox中运行良好。它不起作用了Html 占位符文本溢出:IE10中的省略号不起作用,html,css,placeholder,Html,Css,Placeholder,如果占位符中的文本长度更大,我使用下面的代码来显示省略号。 它在Chrome和Firefox中运行良好。它不起作用了 input[placeholder] { text-overflow:ellipsis; } From:“仅当容器的overflow属性的值为hidden、scroll或auto且空白:nowrap;时,才会发生文本溢出。” 尝试添加以下内容: input[placeholder] { overflow: hidden; text-overflow:
input[placeholder] {
text-overflow:ellipsis;
}
From:“仅当容器的overflow属性的值为hidden、scroll或auto且空白:nowrap;时,才会发生文本溢出。”
尝试添加以下内容:
input[placeholder] {
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
我也遇到了同样的问题,这对我来说很有效。博客的要点是,你可以在IE中的输入中做一个省略号,但前提是输入具有只读属性 显然,在很多情况下,我们不希望我们的输入有一个只读属性。在这种情况下,你可以使用JavaScript来切换它。这个代码是直接从博客中获取的,所以如果你发现这个答案很有用,你可以考虑查看博客并留下对作者的赞赏。 HTML: JavaScript(使用jQuery) 代码如下:
$('input[type=text]').attr('readonly', 'readonly')
.blur(function () {
$(this).attr('readonly', 'readonly');
}).focus(function () {
$(this).removeAttr('readonly');
});
对我来说效果很好。尝试了上述步骤。仍然存在相同的问题-仅在IE中。以下是一些公认的答案,可能也适用于此问题:
.long-value-input {
width: 200px;
height: 30px;
padding: 0 10px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
// 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' );
});
$('input[type=text]').attr('readonly', 'readonly')
.blur(function () {
$(this).attr('readonly', 'readonly');
}).focus(function () {
$(this).removeAttr('readonly');
});