在输入类型=“文本”元素HTML / CSS中包装文本

下面显示的HTML，

<input type="text"/>

在浏览器中显示如下：

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

使用以下HTML，

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

它显示在浏览器中，如下所示：

那是textarea工作-用于多行文本输入。该input 不会去做; 它并非旨在做到这一点。

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

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

断字将模仿某些意图

    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

您不能使用输入，而需要使用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;在样式区域中使用以下属性：要使文本区域不可调整大小，可以使用如下样式resize:none;：

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

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

注意： textarea适用于行，与类似的输入不同<input type="text" name="tbox" size="10"></input>，后者完全不适用于行。

要创建文本输入，其中幕后的值是单行字符串，但以自动换行的格式显示给用户，可以在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>