如何在HTML输入框中使用文本溢出省略号？

Question

我的网页有输入字段，我已经添加了以下CSS：

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

但这似乎没有任何效果。 我是漏掉了一些明显的东西还是不可能仅使用CSS在输入字段中有省略号？

- Jelly Ama

---

刚刚测试了一下，在输入框元素上使用 text-overflow:ellipsis 效果很好（至少在 Chrome 上）。 - talsraviv

接受的答案似乎并没有真正回答这个问题。 - jennEDVT

Answer 1

对于我来说，在输入框本身上设置 text-overflow:ellipsis 就可以解决问题。当输入框失去焦点时，它将截断文本并放置省略号。

- Magsafe

---

还需要添加 white-space:nowrap 和 overflow:hidden 才能使其正常工作 https://www.codeply.com/go/xyUMETlNgs - Carol Skelly

Answer 2

我知道这是一个老问题，但我遇到了同样的问题，并找到了Front End Tricks And Magic的博客文章，它对我有用，所以我想分享一下，以防人们仍然感兴趣。该博客的要点是，在IE中，只有在输入具有readonly属性时才能使用省略号。

显然，在许多情况下，我们不希望我们的输入具有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>

- jennEDVT

---

当您通过控件进行制表时，.click()不起作用，如果将属性移除移动到.focus()，那么它会带来自己的一套问题（因为它仍然具有焦点，所以实际上不会删除readonly属性）。 - Eyeless Whim

我使用了类似的代码，但在IE上无法工作。如果您知道在IE上的解决方案，请评论。 - Shweta

Answer 3

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

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

在失去焦点时，Firefox会将“...”附加到文本的右侧，但仅当文本框右侧隐藏了任何文本时。

而在失去焦点时，Chrome似乎会跳到文本的开头，并在结尾处附加“...”，而不管您离开文本的滚动位置在哪里。

- Greg

---

Firefox 可以在定义两个值时在输入框的两侧呈现 text-overflow 字符，例如 text-overflow: ellipsis ellipsis;。而 Chrome 似乎存在问题。 - thasmo

当宽度接近输入框父元素的宽度时，这个似乎停止工作了。 - trysis

Answer 4

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

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

- Sven Bieder

---

a) 当输入框没有焦点时，Firefox 16会呈现省略号（在错误的位置）。 b) 原因完全错误，显示的内容与DOM中的内容（因此传输的内容）无关。 c) 从可用性的角度来看，当没有焦点时具有省略号标记是最好的选择（可以说）。 - bernstein

当文本框没有聚焦时，Chrome也会呈现省略号。如果你想改变你的“缺乏事实”的回答，我很愿意取消给你的踩！ - The Muffin Man