Question

我的网页上有输入字段，我已应用以下css：

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

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

Answer 1

我知道这是一个古老的问题，但我遇到了同样的问题并遇到了this blog post from Front End Tricks And Magic对我有用，所以我认为我会分享，以防人们仍然好奇。博客的要点是，您也可以在IE中的输入中进行省略，但前提是输入具有readonly属性。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

在输入上设置text-overflow:ellipsis对我来说是个窍门。当输入失焦时，它会截断并放置省略号。

Answer 3

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

然而，它们的效果略有不同。

On blur将Firefox附加到文本右侧，但仅当文本框的右侧隐藏有任何文本时才会显示。

然而，在模糊的情况下，无论您离开文本的滚动位置，Chrome似乎都会跳到文本的开头并在最后添加...。

Answer 4

字段是具有自己规则的元素。输入字段的实现方式是，如果文本比字段长，则文本只是看不见。

原因是，如果你在表单中使用字段并且可以使用文本溢出省略号，那么它只会传输截断的内容，这不是想要的效果。

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

4 个答案: