输入字段,换行文本而不是水平扩展

Xti*_*ian 30 html css text input word-wrap

我有一个输入字段,用户将在其中写入文本,但是当文本变长时,它只是水平延伸而不是垂直下降.

我试过了:溢出:隐藏; 自动换行:break-word;

我没有运气 关于如何实现这一目标的任何其他建议?

Len*_*rri 21

我认为你应该使用多行输入字段作为TextArea:

http://htmlhelp.com/reference/html40/forms/textarea.html

示例代码:

<textarea rows="10" cols="30"></textarea> 
Run Code Online (Sandbox Code Playgroud)

  • 我很乐意使用textarea,但我被迫使用输入字段. (6认同)
  • 如何在不允许多行输入的情况下使用它?我的用例是我想要一行输入,但是我希望在固定的水平区域中显示它并在需要时进行换行.删除keyup上的换行符是一种选择,但它感觉很hacky. (4认同)
  • "强迫"以什么方式? (3认同)

Kyl*_*egg 5

Xtian - 您不应该对需要使用 an<input>或 a 的位置有任何限制<textarea>。只需为文本区域指定与用于输入的名称相同的名称,就可以了。

例如,我刚刚更换了

<input type="text" name="reply" />
Run Code Online (Sandbox Code Playgroud)

<textarea rows="1" cols="26" name="reply"></textarea>
Run Code Online (Sandbox Code Playgroud)

现在好多了。

  • 这绝对不是真的。这假设 OP 有意避免使用“textarea”,因为表单可能不会提交文本。但实际上有很多情况/原因你可能会[被迫](/sf/ask/227616301/​​ntally/68249913#comment3360566_3251699)使用一个“输入”。例如,[Django Forms](https://docs.djangoproject.com/en/3.2/topics/forms/) 根据您的数据库结构在 HTML 文件中预渲染表单,并且几乎不让您选择输入内容使用类型。 (2认同)