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

Question

HTML如下所示，

<input type="text"/>

在浏览器中显示如下：

---

When I add the following text,

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

使用下面的HTML，

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

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

---

But I would like it to be displayed in a browser like so:

---

I want the text in my input element to wrap. Can this be accomplished without a 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"code一起使用，并选择其他属性，如下所示：

<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个cols的textarea，其中包含自动换行，最大字符长度为“40”字符，其工作方式与输入文本框完全相同，但是使用行而不使用输入文本。

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