如何在普通HTML文本框中实现文字换行？

Question

我有一个文本框。

<p>Event Data :<input  id="data" type="text" wrap="true" value="{{data}}" 
            style="width: 757px; height: 170px" />
    </p>   

我希望它可以多行显示，但我不能使用 asp:textbox。是否可以使用普通的文本框并将其设置为多行或者使文本框中的文本自动换行？

让文本框中的文本进行自动换行。

- dexter

---

我认为你想要的是 wrap="virtual"。 - Rob

Answer 1

这个怎么样：

<p>Event Data:
<textarea id="data" style="width: 757px; height: 170px" rows="10" cols="80">{{data}}</textarea>
</p>

致敬（加上赞）斯图尔特指出rows和cols是textarea所必需的属性。

- Dominic Rodger

Answer 2

<p>Event Data:
<textarea id="data" rows="10" cols="80">{{data}}</textarea>
</p>

必须填写rows和cols属性，原因我也不知道。如果你要在CSS中设置大小，通常最好使用em或%而不是px。

- Stewart

---

我知道这条评论已经有9年了，所以这只是一个澄清；使用HTML5时，行/列不再是必需的。例如，w3schools表示：“文本区域的大小可以通过cols和rows属性指定，甚至更好的方法是通过CSS的高度和宽度属性来指定。”。 - Oliver Schimmer

Answer 3

如果您想让文本值显示为多行，可以在文本区域元素中添加 white-space: pre; 样式，并确保将正确的换行符放入返回的 {{data}} 中。

- Dan Gayle

Answer 4

你需要使用带有wrap属性的<textarea>。虽然它不在任何HTML标准中，但据我所知，"soft"、"hard"和"off"设置在所有主要浏览器中都有效，尤其是IE。然而，Firefox似乎需要为wrap设置一个"cols"选项才能正常工作。

- Pekka

---

什么是 word-wrap 属性？http://www.w3.org/TR/html401/interact/forms.html#h-17.7 - Dominic Rodger

在哪些浏览器中，即使没有任何非标准属性，它也不会自动换行？ - Stewart