在HTML/CSS中，如何将文本包裹在input type="text"元素中？

Question

以下是HTML代码：

<input type="text"/>

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

---

当我添加以下文本时，

The quick brown fox jumped over the lazy dog.

使用以下 HTML：

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

在浏览器中显示的样子如下：

---

但我希望它在浏览器中以以下方式显示：

---

我希望文本框中的文本能够换行。 是否可以不使用textarea来实现？

- Web_Designer

---

不，我认为不行。但为什么不考虑使用文本区域？ - Pekka

有时候，由于不想让用户输入多行文本，所以无法使用文本区域。这时候需要用单行文本框（注意：它们不是一回事）。 - Flatliner DOA

@Pekka웃 不是说这很相关，但一些原因包括：我们无法在文本区域上使用HTML5验证；我们无法使用模式约束来验证文本区域；文本区域是输入类型为文本的不必要同义词（它是一个输入类型为文本的输入！）这意味着两倍的样式等等。简而言之，有许多原因。 - Peter Kionga-Kamau

同时，如果能够包装输入类型为URL的元素会更好。文本区域不提供此功能（选择适当的键盘和验证URL等）。 - user3425506

如果允许使用JS，您可以使用textarea，并使用oninput属性删除所有换行符。有关更多信息，请参见此答案。 - R. Wang

Answer 1

这就是 textarea 的作用 - 用于多行文本输入。 input 标签无法胜任； 它不是为此而设计的。

因此，请使用 textarea。除了它们的视觉差异外，它们通过 JavaScript 访问的方式相同（使用 value 属性）。

您可以通过在 input 事件中使用 replace(/\n/g, '') 来防止输入换行符。

- alex

---

这并没有真正回答如何在输入时显示换行的单行输入的问题。 - ehdv

问题在于，在移动设备上，文本框会屏蔽掉“前往”按钮。 - Dan

@alex 没错。因此，如果您需要真正的多行输入，则textarea更好，但如果您只需要自动换行的输入，则css解决方案更好。 - Dan

我本来想说<textarea>不能与jQuery的自动完成之类的东西一起使用，但只需将<input>更改为<textarea>即可。标准万岁！ - Sablefoste

如上所述：换行并不等同于多行字符串。 我不确定为什么这是被接受的答案，因为它并没有回答问题。 - mattLummus

Answer 2

单词分割将模仿某些意图

    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

- Thiago Macedo

---

我刚在Firefox 43.0.4中测试了它，但它不起作用，然而在Safari 9和Chrome 48中似乎可以工作：http://www.cssdesk.com/dbCSQ - Jason Sperske

@JasonSperske提供的演示在我使用的Firefox 45和Chrome 50中都无法正常工作。 - czerny

演示在我的Linux Chrome 48上可以运行，但是同样的CSS在我的页面上却不行。 - Mnebuerquo

解决方案至少从 Chrome 50 开始变得过时了 :( - userlond

忘记这个解决方案：不适用于Chrome 74/75，Firefox 63/67，Edge 42，IE 11和UCBrowser 7.0（但适用于GNOME Web 3.28 - AppleWebKit/605.1.15）。 - tanguy_k

演示的链接现在也已经失效了。 - riggedCoinflip

Answer 3

您不能使用标签，必须改用标签。 使用<textarea>标签时，请加上<code>wrap="soft"</code>属性，并可根据需要添加其他属性：</p><pre><code><textarea name="text" rows="14" cols="10" wrap="soft"> </textarea> </code></pre><p><strong>属性：</strong>要限制文本的长度，例如到“40”个字符，您可以添加属性<code>maxlength="40"</code>，如下所示：<code><textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40"></textarea></code> 要隐藏滚动条，可以使用样式。如果您仅使用<code>overflow:scroll;</code>或<code>overflow:hidden;</code>或<code>overflow:auto;</code>，它只会影响一个滚动条。如果您想为每个滚动条使用不同的属性，则可以使用以下属性：<code>overflow:scroll; overflow-x:auto; overflow-y:hidden;</code>在样式区域中: 要使文本区域不可调整大小，可以使用样式<code>resize:none;</code>，如下所示：</p><pre class="guess-Ini"><code><textarea name="text" rows="14" cols="10" wrap="soft" maxlength="40" style="overflow:hidden; resize:none;></textarea> </code></pre><p>这样您就可以拥有一个文本区域，包含14行和10列，自动换行且最大字符长度为“40”个字符，其功能与文本框相同但使用行而不是输入文本。</p> <p><strong>注意：</strong>文本区域使用行而不是像输入框 <code><input type="text" name="tbox" size="10"></input></code> 那样完全不使用行。</p>

- SeekLoad

---

这个答案对我帮助最大，它清晰、简明扼要、重点突出。谢谢！ - jbeku

这个回答说，“与输入文本框完全相同”--但是它会在按下Enter键时提交吗？因为这是<input type="text">的一个重要部分（我需要在禁用JavaScript的浏览器中使用），而我目前没有看到textarea以这种方式工作。 - Marcus

它不能在按下回车键时提交...但是当然可以使用JavaScript为其附加事件监听器... - mb21

wrap="soft"是默认设置，定义它没有意义，它的相反设置是wrap="hard"。当在form中提交时，使用wrap="hard"会使textarea中的文本自动换行（包含换行符）。使用"hard"时，必须指定cols属性。 - undefined

有关后者的更多信息，请参阅：https://stackoverflow.com/a/68974166/2817442 - undefined

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>

- Sam Herrmann

---

我已经调查了使用这种技术，并且它有一些注意事项。我喜欢它自动正确调整大小，但它也带来了一些复杂性。例如，如果您想保留用户输入的换行符，则 textContent 将无法工作。如果您想要换行符提交表单（正常的 HTML 行为），则需要附加一个 keydown 事件侦听器来拦截该按键代码。 - Aaron Breckenridge

请注意，这允许富文本格式，例如我可以通过选中一个单词并按下Ctrl+B来将它标记为粗体。 - cdauth

Answer 5

是的，你绝对可以这样做。这是我和我妹妹为我们网站编写的代码，用于让人们输入问题和额外信息，还具有包装文本框。可能有一些东西你需要改变，以使它适合你所使用的目的。

<div class="product-form__input">
    <label class="form__label" for="custom-questions">
        Your Question(s) & Additional Info.
    </label>
    <textarea class="field__textarea" required style="border:3px double #121212;" id="custom-questions" form="{{product_form_id}}" name="properties[Your Question(s) & Additional Info.]" rows="3" cols="41">
    </textarea>
</div>

- Melanie R

---

嗨，@Melanie R. 我已经编辑了您的评论，并正确格式化了代码片段。请参阅此链接以了解如何执行此操作：https://stackoverflow.com/help/formatting。感谢您的贡献！ - Catalyst

这并没有回答问题，问题是如何在<input type="text"/>中换行文本，而你使用的是<textarea>，这是完全不同的元素。 - FluffyKitten