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

【问题标题】：How to use text-overflow ellipsis in an html input field?如何在 html 输入字段中使用文本溢出省略号？
【发布时间】：2012-04-04 00:49:22
【问题描述】：

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

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

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

【问题讨论】：

刚刚检查过，text-overflow:ellipsis 在 input 元素上效果很好（至少在 Chrome 中）
接受的答案似乎并没有真正回答这个问题。

标签： html css ellipsis

【解决方案1】：

我知道这是一个老问题，但我遇到了同样的问题并且遇到了对我有用的this blog post from 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>

【讨论】：

.click() 在您切换控件时不起作用，并且如果您将道具移除移动到 .focus()，这会带来它自己的一系列问题（实际上并没有删除 readonly 属性，因为它仍然有焦点）
我使用了类似的代码，但它不适用于 IE。如果您知道 ie 上的解决方案，请发表评论。

【解决方案2】：

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

【讨论】：

还需要white-space:nowrap 和overflow:hidden 才能使其工作codeply.com/go/xyUMETlNgs

【解决方案3】：

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

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

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

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

【讨论】：

Firefox 可以在定义两个值时在输入字段的两侧呈现文本溢出字符，例如text-overflow: ellipsis ellipsis;。 Chrome 似乎对此有问题。
当宽度几乎是输入父级的宽度时，这似乎停止工作。

【解决方案4】：

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

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

【讨论】：

a) firefox 16 渲染省略号（位置错误），当输入字段没有聚焦时 b) 原因完全错误，显示的内容与 dom 中的内容无关（并因此传输）c) 在不聚焦时具有省略号标记（可以说）从可用性 pov 来看是最好的
当文本框未聚焦时，Chrome 也会呈现省略号。如果您想更改“缺乏事实”的答案，我很乐意删除我给您的反对票！