在 input type="text" 元素 HTML/CSS 中包装文本

Question

下图的HTML，

<input type="text"/>

在浏览器中显示如下：

---

当我添加以下文本时，

敏捷的棕色狐狸跳过了懒狗。

使用下面的 HTML，

 <input type="text" value="The quick brown fox jumped over the lazy dog."/>

它在浏览器中显示如下：

---

但我希望它像这样显示在浏览器中：

---

我希望输入元素中的文本换行。 这可以在没有文本区域的情况下完成吗？

Answer 1

那是textarea的工作 - 用于多行文本输入。 input不会这样做； 它不是为这样做而设计的。

所以使用textarea 。 除了视觉上的差异之外，它们还可以通过 JavaScript 以相同的方式访问（使用value属性）。

您可以防止通过input事件input换行符，只需使用replace(/\\n/g, '') 。

Answer 2

Word Break 会模仿一些意图

 input[type=text] { word-wrap: break-word; word-break: break-all; height: 80px; }

 <input type="text" value="The quick brown fox jumped over the lazy dog" />

作为一种变通方法，此解决方案在某些浏览器上失去了有效性。 请查看演示： http : //cssdesk.com/dbCSQ

Answer 3

您不能为它使用输入，您需要使用 textarea 代替。 将 textarea 与wrap="soft"代码和可选的其余属性一起使用，如下所示：

<textarea name="text" rows="14" cols="10" wrap="soft"> </textarea>

属性：要将其中的文本数量限制为例如“40”个字符，您可以像这样添加属性maxlength="40" ： <textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40"></textarea>隐藏滚动样式。 如果你只使用overflow:scroll; 或overflow:hidden; 或overflow:auto; 它只会对一个滚动条有效。 如果你想为每个滚动条设置不同的属性，那么使用像这样的属性overflow:scroll; overflow-x:auto; overflow-y:hidden; overflow:scroll; overflow-x:auto; overflow-y:hidden; 在样式区域中：要使 textarea 不可调整大小，您可以使用带有resize:none;的样式resize:none; 像这样：

<textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40" style="overflow:hidden; resize:none;></textarea>

这样，您可以拥有或示例一个包含 14 行和 10 列的文本区域，带有自动换行和“40”个字符的最大字符长度，其工作方式与输入文本框完全相同，但使用行而不使用输入文本。

注意： textarea 与行不同，就像 input <input type="text" name="tbox" size="10"></input> ，它根本不与行一起工作。

Answer 4

要创建一个文本输入，其中引擎盖下的值是单行字符串但以自动换行格式呈现给用户，您可以在<div>或其他元素上使用contenteditable属性：

 const el = document.querySelector('div[contenteditable]'); // Get value from element on input events el.addEventListener('input', () => console.log(el.textContent)); // Set some value el.textContent = 'Lorem ipsum curae magna venenatis mattis, purus luctus cubilia quisque in et, leo enim aliquam consequat.'

 div[contenteditable] { border: 1px solid black; width: 200px; }

 <div contenteditable></div>

Answer 5

我知道这是旧的，但没有人提到这一点，所以我想我会添加一个想要这个的理由。

如果需要将数据存储到隐藏的表单字段（如大字符串）中，则可以通过在完成测试时将“隐藏”更改为“文本”并返回“隐藏”来轻松显示该字段以进行测试。 文本区域不能。 它是完全不同的 object。

话虽如此，文本区域可以将 css 显示属性设置为“无”以隐藏它并仍然允许访问内容。