当文本长度小于td的长度时，输入中的文本（在表td内）不能正确显示IE9

Question

我在td中有一个输入字段：

<td title="" style="" role="gridcell">
   <input type="text" readonly="true" value="some_long_string_comes_here" style="background-color:transparent;border:0px solid white;">
</td>

文本的长度小于td的长度。在Firefox上可以，但在Internet Explorer 9上我看不到整个文本。

编辑1：原因是：输入没有宽度 - 大小 - maxlenght等，但输入元素的长度小于文本。在Firefox，它等于文本的长度。我不想像宽度一样使用任何特殊属性。

编辑2：以下是我在调试模式下将鼠标悬停到输入字段时的屏幕截图：

您只能看到 some_long_string_comes 而不是 some_long_string_comes_here

有什么想法吗？

Answer 1

如果你的意思是你无法在输入中看到文字 - 如果你输入更大的内容，添加size=""属性或者更多，通过添加你的风格在输入上使用css格式，会怎么样：

<input style="width: 200px;"/>

编辑：你可以使用一些autoresize插件调整输入大小..（有jquery / javascript和angularjs） 这样输入将具有您想要的大小，然后通过使相应的表格列宽更大来使td变大。

• jquery autosize：jQuery - auto size text input (not textarea!)

• angularjs autosize：https://stackoverflow.com/a/19303950/986160，https://gist.github.com/mbenford/8016984

Answer 2

您可以使用span或其他标记代替输入readonly =＆＃34; true＆＃34; 并将规则样式设置为td white-space ：否-wrap

<td  style="white-space:no-wrap;" role="gridcell">
<span  style="background-color:transparent;border:0px solid white;"> somestring_comes_here</span>
</td>

Answer 3

<input type="text">元素的宽度默认为20“平均”字符。浏览器的“平均”概念不同，它们可能使用不同的默认字体，因此字符的宽度会有所不同。但是在流行的浏览器中，使用默认设置

，渲染效果并没有太大差异

可以使用size属性或在CSS中设置width来更改宽度。它不依赖于父元素的内容或宽度（除非您使用input单位以创建此类依赖关系的方式设置%元素的宽度）。

如果您希望向用户显示某些数据并将其作为表单数据直接传递（如果只读），那么如果将这些功能分开，则可以获得更大的灵活性。将数据作为普通内容，例如在span元素中（以便能够设置样式）并分别放入隐藏字段：

<input type="hidden" value="some_long_string_comes_here" name="foo">
<span class="show">some_long_string_comes_here</span>

我添加了name属性，因为没有它，该字段不会对表单数据做出任何贡献。

在此方法中，默认情况下，可见文本显示为普通文本。