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

Question

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

这可能吗？如果没有，你如何在 JavaScript 中做到这一点？

注意：虽然这似乎适用于 Chrome，但它不适用于 Android 股票浏览器。

我当前用于输入字段的 css：

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

谢谢！

Answer 1

根据您的要求，您可以使用 CSStext-overflow来实现：

HTML：

<input disabled="disabled" value="really really long text that will be trunked" />

CSS

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

演示：http: //jsfiddle.net/yrPc8/

Answer 2

我认为这个答案会对你有所帮助

您可以创建一个类并将其应用于您的textbox
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

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

根据Ben修复 Android CSS 文本溢出问题

*{
    text-rendering: optimizeLegibility;
}

在这里查看它http://jsfiddle.net/b4YjX/

Answer 3

这似乎是 Android 浏览器中的一个限制/错误：它似乎无法text-overflow: ellipsis在任何input元素上实现。

例如，代替<input name=foo value="some long string here" 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">

对于只读字段，有一个简单的解决方法：复制数据，首先在div您设置的（比如说）元素中，text-overflow: ellipsis然后在隐藏字段中。您可能希望将第一个元素的样式设置为看起来像只读字段，但将其保留为普通文本会使用户更清楚地知道无法使用普通方式编辑此数据。

与小型设备一样，您通常需要<meta name="viewport" content="width=device-width,initial-scale=1">与100%实际设备宽度相对应的东西。

Answer 4

以下代码已经过测试并且可以正常工作，希望对您有所帮助！

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