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

Question

HTML如下所示,

<input type="text"/>

在浏览器中显示如下:

---

当我添加以下文字时,

快速的棕色狐狸跳过懒狗.

使用下面的HTML,

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

它显示在浏览器中,如下所示:

---

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

---

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

Answer 1

这是textarea工作 - 用于多行文本输入.该input 不会去做 ; 它不是为了做到这一点而设计的.

所以用一个textarea.除了它们的视觉差异,它们也可以通过JavaScript以相同的方式访问(使用value属性).

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

Answer 2

Word Break将模仿一些意图

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

Answer 3

要创建一个文本输入，其中引擎盖下的值是单行字符串但以自动换行格式呈现给用户，您可以在 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>

Answer 4

您不能使用输入，而需要使用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>即到由不工作，在所有行。