使textarea中的文本不会中断到下一行[重复]

Posted 2023-05-07

【中文标题】使textarea中的文本不会中断到下一行[重复]

【英文标题】：Make text inside textarea not break to next line [duplicate]

【发布时间】：2021-06-08 10:31:35

【问题描述】：

所以我有一个 textarea，当你在一行上放太多 next 时，它会溢出并进入下一行，而不是在下一行。

这很正常，但如果我不希望它进入下一行并继续前进，可能带有滚动条，以便您可以滚动查看文本，该怎么办

例如

text here flows onto
the next line

我希望它是

text here doesnt flow onto the next line, but might not be visible without scrolling

在textarea

这可能吗？我已经尝试过overflow-x，但这似乎不起作用

【问题讨论】：

为什么不直接使用input？

我需要它是多行的，将其设为textarea 更有意义

【参考方案1】：

使用white-space: nowrap; CSS 属性和overflow

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

【参考方案2】：

您可以通过应用 css - white-space: nowrap 规则来做到这一点。

textarea 
  white-space: nowrap;

<textarea></textarea>

【讨论】：

谢谢！这和white-space: pre; 有效

@TheSavageTeddy，是的，但white-space: nowrap 更适合用于您的任务！由于white-space: pre 更适合带有空格和连字符的文本，因为它是在 html 代码中设置的样式。此外，类似物是<pre> 标签。

【参考方案3】：

将white-space: pre; 设置为文本区域

textarea 
  white-space: pre

<textarea cols="50" rows="2"></textarea>