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

Wrapping text inside input type="text" element HTML/CSS

提问by Web_Designer

The HTML shown below,

如下所示的 HTML，

<input type="text"/>

is displayed in a browser like so:

在浏览器中显示如下：

---

---

当我添加以下文字时，

The quick brown fox jumped over the lazy dog.

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

Using the HTML below,

使用下面的 HTML，

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

it is displayed in a browser like so:

它在浏览器中显示如下：

---

---

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

---

---

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

采纳答案by alex

That is the textarea's job - for multiline text input. The inputwon't do it; it wasn't designed to do it.

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

So use a textarea. Besides their visual differences, they are accessed via JavaScript the same way (use valueproperty).

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

You can prevent newlines being entered via the inputevent and simply using a replace(/\n/g, '').

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

回答by Thiago Macedo

Word Break will mimic some of the intent

Word Break 会模仿一些意图

input.break {
    word-wrap: break-word;
    word-break: break-all;
    height: 80px;
}

As a workaround, this solution lost its effectiveness on some browsers. Please check the demo: http://cssdesk.com/dbCSQ

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

回答by SeekLoad

You can notuse input for it, you need to use textarea instead. Use textarea with the wrap="soft"code and optional the rest of the attributes like this:

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

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

Atributes:To limit the amount of text in it for example to "40" characters you can add the attribute maxlength="40"like this: <textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40"></textarea>To hide the scroll the style for it. if you only use overflow:scroll;or overflow:hidden;or overflow:auto;it will only take affect for one scroll bar. If you want different attributes for each scroll bar then use the attributes like this overflow:scroll; overflow-x:auto; overflow-y:hidden;in the style area: To make the textarea not resizable you can use the style with resize:none;like this:

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

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

That way you can have or example a textarea with 14 rows and 10 cols with word wrap and max character length of "40" characters that works exactly like a input text box does but with rows instead and without using input text.

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

NOTE:textarea works with rows unlike like input <input type="text" name="tbox" size="10"></input>that is made to notwork with rows at all.

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

回答by Sam Herrmann

To create a text input in which the value under the hood is a single line string but is presented to the user in a word-wrapped format you can use the contenteditableattribute on a <div>or other element:

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

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>