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

下面显示的 HTML,

<input type="text"/>

在浏览器中显示如下:

当我添加以下文本时,

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

使用下面的 HTML,

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

它在浏览器中显示如下:

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

我希望我的输入元素中的文本换行。 如果没有文本区，这能实现吗？

258156 次浏览
小开
最佳答案

这就是 textarea的工作——用于多行文本输入。

因此，使用 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" />

As a workaround, this solution lost its effectiveness on some browsers. Please check the demo: http://cssdesk.com/dbCSQ

小开

你可以使用 没有的输入，你需要使用 textarea 代替。 在 wrap="soft"代码中使用 textarea，并可选择其他属性，如下所示:

<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>不同，没有完全可以处理行。

小开

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


提交答案