Javascript 如何在Android股票浏览器的只读输入字段上显示省略号？

如果文本太长，如何设置输入字段以显示省略号？输入字段为只读，其宽度设置为100%

这可能吗？如果没有，如何用JavaScript实现

注意：虽然这似乎在Chrome上有效，但在Android股票浏览器上不起作用

输入字段的当前css：

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

谢谢

我想这对你有帮助

您可以创建一个类并将其应用于您的

文本框


HTML

<input type="text" readonly value="Lorem ispum dolor sit amit Lorem ispum dolor sit amit Lorem ispum dolor sit amit Lorem ispum dolor sit amit " class="ellipsis">

根据

在此处查看“实时”
根据您的要求，您可以使用CSS来实现这一点：

HTML:

演示：
以下代码已经过测试，可以正常工作，希望对您有所帮助

.input{
overflow:hidden;
text-overflow:ellipsis;
width:100%;
}

这似乎是Android浏览器中的一个限制/缺陷：它似乎无法在任何
输入
元素上实现
文本溢出：省略号

例如，您可以使用

<style>
.hidden { 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%; 
}
</style>
<div class=hidden>some long string here</div>
<input type=hidden name=foo value="some long string here">


.hidden{
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
宽度：100%；
}
这里有些长线

对于只读字段，有一个简单的解决方法：复制数据，首先在（比如）设置
文本溢出：省略号的
div
元素中，然后在隐藏字段中。您可能希望将第一个元素的样式设置为只读字段，但将其保留为普通文本会让用户更清楚地看到，不能使用普通方式编辑此数据

与小型设备一样，您通常需要类似
的内容，以使
100%
与实际设备宽度相对应。
可能重复@JukkaK.Korpela:上面的链接是关于通用html标记的。我的问题是针对输入字段的。我能够在html标记上显示省略号，但不能在输入字段上显示省略号。谢谢如果您有关于特殊情况的特定问题，应以这种方式提出（最好参考一般情况）。从评论中可以看出，您在使用特定浏览器时似乎遇到了问题。应该在问题的文本和标题中做出适当的澄清，而不仅仅是在评论中。@JukkaK.Korpela：谢谢你的建议！我已经更新了我的标题。谢谢你的回答，但这在Android浏览器上不起作用。我的当前代码与你的代码相同，减去
-o-text-overflow
。它在Chrome上工作，但在Android股票浏览器上不工作。@Arci:你能看看这个吗？谢谢你的链接！然而，这并不能解决我的问题。我还尝试了
优化易读性
属性，但输入字段仍然没有显示省略号。嗨！谢谢你的评论！我也有文本溢出的宽度，但它仍然没有显示在Android股票浏览器省略号。谢谢，丹尼尔！但是你的回答和其他的评论者是一样的。但是，这在Android股票浏览器上不起作用。
<input disabled="disabled" value="really really long text that will be trunked" />

input{
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    width: 100px;
}

.input{
overflow:hidden;
text-overflow:ellipsis;
width:100%;
}

<style>
.hidden { 
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%; 
}
</style>
<div class=hidden>some long string here</div>
<input type=hidden name=foo value="some long string here">