在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 won't do it;它不是为此而设计的。

所以请使用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

你可以不使用输入，你需要使用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;之类的属性： 要使textarea不可调整大小，您可以使用resize:none;这样的样式：

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

通过这种方式，您可以拥有或者示例包含14行和10列的文本区域，其中包含自动换行，最大字符长度为“40”字符，其工作方式与输入文本框完全相同，但不使用输入文本。 / p>

注意： textarea适用于行，与输入<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>