我的网页有输入字段,我已经添加了以下CSS:
.ellip {
white-space: nowrap;
width: 200px;
overflow: hidden;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
但这似乎没有任何效果。 我是漏掉了一些明显的东西还是不可能仅使用CSS在输入字段中有省略号?
对于我来说,在输入框本身上设置 text-overflow:ellipsis
就可以解决问题。当输入框失去焦点时,它将截断文本并放置省略号。
white-space:nowrap
和 overflow:hidden
才能使其正常工作 https://www.codeply.com/go/xyUMETlNgs - Carol Skellyreadonly
属性时才能使用省略号。
显然,在许多情况下,我们不希望我们的输入具有readonly属性。在这种情况下,您可以使用JavaScript进行切换。此代码直接取自博客,因此如果您发现此答案有用,您可以考虑查看博客并留下感谢作者的评论。
// 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');
});
.long-value-input {
width: 200px;
height: 30px;
padding: 0 10px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="long-value-input-container">
<input type="text" class="long-value-input" value="sdghkjsdghhjdfgjhdjghjdfhghjhgkdfgjnfkdgnjkndfgjknk" readonly />
</div>
经过我的测试,Chrome、Safari和Firefox现在都支持它。
然而,它们的效果略有不同。
在失去焦点时,Firefox会将“...”附加到文本的右侧,但仅当文本框右侧隐藏了任何文本时。
而在失去焦点时,Chrome似乎会跳到文本的开头,并在结尾处附加“...”,而不管您离开文本的滚动位置在哪里。
text-overflow: ellipsis ellipsis;
。而 Chrome 似乎存在问题。 - thasmo字段是具有自己规则的元素。输入字段的实现方式是,如果文本长度超过字段长度,则文本将变得不可见。
这样做的原因是,如果您在表单中使用该字段,并且可以使用文本溢出省略号,则它只会传输被截断的内容,这不是想要的效果。
text-overflow:ellipsis
效果很好(至少在 Chrome 上)。 - talsraviv