67

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

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

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

4

4 回答 4

43

我知道这是一个老问题，但是我遇到了同样的问题，并且遇到了 Front End Tricks And Magic 的这篇博文，它对我有用，所以我想我会分享一下，以防人们仍然好奇。该博客的要点是，您也可以在 IE 中的输入中使用省略号，但前提是输入具有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>

于 2015-11-05T18:41:45.327 回答
40

设置text-overflow:ellipsis输入本身对我有用。当输入失焦时，它会截断并放置省略号。

于 2016-11-24T03:21:14.793 回答
5

根据我的测试，Chrome、Safari 和 Firefox 现在都支持它。

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

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

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

于 2012-03-19T14:31:11.417 回答
-12

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

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

于 2012-03-19T14:26:46.703 回答