如何在html输入字段中使用文本溢出省略号？

Question

我的网页有输入字段,我已应用以下css:

.ellip {
    white-space: nowrap;
    width: 200px;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

但这似乎没有任何影响.我在这里遗漏了一些明显的东西,或者仅使用CSS在输入字段中是否不能使用省略号？

Answer 1

我知道这是一个老问题,但我遇到了同样的问题,并且发现了前端技巧和魔术的这篇博文,对我有用,所以我想我会分享以防人们仍然很好奇.博客的要点是,您可以在IE中的输入中进行省略,但前提是输入具有只读属性.

显然,在许多情况下,我们不希望输入具有只读属性.在这种情况下,您可以使用JavaScript来切换它.此代码直接来自博客,因此如果您发现此答案有用,您可以考虑查看博客并向作者留下评论.

HTML:

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

CSS:

.long-value-input {
  width: 200px;
  height: 30px;
  padding: 0 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

JavaScript(使用jQuery)

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

Answer 2

设置text-overflow:ellipsis输入本身对我来说是个窍门.当输入失焦时,它会截断并放置省略号.

Answer 3

从我的测试 Chrome，Safari 和 Firefox 现在支持它。

但是，它们的效果确实略有不同。

在模糊时，Firefox 将 ... 添加到文本右侧，但前提是文本框右侧隐藏了任何文本。

而在 blur 上，Chrome 似乎跳到文本的开头并在末尾附加 ...，无论您将文本的滚动位置留在何处。