CSS-如何在HTML输入字段中使用文本溢出省略号?

我的网页有一些输入字段,我在其中应用了以下CSS:

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

但这似乎没有任何效果。我是否在这里遗漏了一些明显的信息,还是仅使用CSS在输入字段中没有省略号?

Jelly Ama asked 2020-01-24T02:07:44Z
4个解决方案
25 votes

我知道这是一个老问题,但是我遇到了同样的问题,并且从Front Tricks And Magic上找到了这篇博客文章,该文章对我有用,所以我想我愿意分享,以防人们仍然好奇。 该博客的要旨是,您也可以在IE中的输入中进行省略号,但前提是该输入具有<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>属性。

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

<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>
<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>
<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 answered 2020-01-24T02:10:13Z
21 votes

在输入本身上设置text-overflow:ellipsis可以帮到我。 当输入未聚焦时,它将截断并放置省略号。

Mo Bitar answered 2020-01-24T02:10:33Z
4 votes

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

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

在模糊效果下,Firefox会在文本的右侧追加...,但前提是文本框的右侧隐藏了任何文本。

尽管模糊,Chrome似乎跳到文本的开头,并在末尾添加...,无论您将文本的滚动位置留在何处。

Greg answered 2020-01-24T02:11:07Z
-10 votes

字段是具有自己规则的元素。 输入字段的实现方式是,如果文本的长度大于字段的长度,则文本不会被看到。

这样做的原因是,如果您以某种形式使用该字段,并且有可能使用文本溢出省略号,那么它将仅传输截断的内容,而不是所需的效果。

Sven Bieder answered 2020-01-24T02:11:32Z
translate from https://stackoverflow.com:/questions/9771795/how-to-use-text-overflow-ellipsis-in-an-html-input-field