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

我的网页上有输入字段，而我已经应用了下面的CSS：如何在html输入字段中使用文本溢出省略号？

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

但是，这似乎并没有产生任何影响。我在这里丢失了一些明显的东西，还是不可能在仅使用CSS的输入字段中使用省略号？

来源

2012-03-19 Jelly Ama

刚刚检查过，'text-overflow：ellipsis'对'input'元素很有效（至少在Chrome中） – talsraviv 2012-11-13 18:37:11

接受的答案似乎并没有真正回答这个问题。 – jennEDVT 2015-11-05 18:06:18

-9

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

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

来源

2012-03-19 14:26:46

+13

** a）** firefox 16呈现省略号（在错误的位置），当输入字段没有焦点时** b）**原因完全错误，显示的内容与dom中的内容无关（和因此被传送）** c）**当没有聚焦时具有省略号标记（可以说是）来自可用性的最佳POv – bernstein 2012-07-18 18:24:43

当文本框未被聚焦时，Chrome也呈现省略号。如果你想改变你的“缺乏事实”的答案，我想删除我给你的downvote！ – 2013-11-21 19:47:33

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

但是它们确实有稍微不同的效果。

模糊Firefox附加到文本的右侧，但仅限于文本框右侧隐藏任何文本。

模糊Chrome Chrome浏览器似乎跳转到文本的开头，并在最后追加......，无论您在哪里离开文本的滚动位置。

来源

2012-03-19 14:31:11 Greg

定义两个值时，Firefox可以在输入字段的两侧呈现文本溢出字符，例如'text-overflow：ellipsis ellipsis;'。 Chrome似乎有问题。 – Thasmo 2015-02-13 00:10:27

当宽度几乎是输入父项的宽度时，这似乎停止工作。 – trysis 2016-08-10 16:22:07

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

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

HTML：

<div class="long-value-input-container"> 
    <input type="text" 
    value="sdghkjsdghhjdfgjhdjghjdfhghjhgkdfgjnfkdgnjkndfgjknk" class="long- 
    value-input" readonly /> 
</div>

CSS：

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

的JavaScript（使用jQuery）

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

来源

2015-11-05 18:41:45 jennEDVT

只读只保存了我的一天！ +1给你，M'am！ – Lucas 2015-12-22 08:56:58

。当你通过控件选项卡时，.click（）不起作用，并且如果将prop删除移动到.focus（），那么它自带一组问题（实际上并没有删除readonly属性，因为它仍然是得到了重点） – 2017-01-23 18:39:35

上输入自己的伎俩，我设置text-overflow:ellipsis。当输入失焦时，它会截断并放置省略号。

来源

2016-11-24 03:21:14

这是正确的答案做得好:) – trenthogan 2017-11-15 22:10:17

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

回答

相关问题