是否可以在输入中包装文本？答案

【问题标题】：Is it possible to wrap text in an input?是否可以在输入中包装文本？
【发布时间】：2016-05-25 01:34:52
【问题描述】：

不 - 我不想使用文本区域。

我想将文本输入设置为基本上看起来像文本区域。因此我希望它打破文本而不是水平延伸。

为什么？我想禁止用户输入中的换行符，并且我想避免实现不允许 return 的 javascript、从粘贴的内容中删除换行符以及其他可能的hacks。

【问题讨论】：

不确定如何让文本与顶部对齐 -- jsfiddle.net/teqs6dov
您可以创建自定义元素并将其扩展为具有输入功能 -- webcomponents.org/articles/introduction-to-custom-elements
当然我们可以扩展元素来做应该是常见的行为。但是话又说回来，为什么我们每次想要做的时候都必须重新发明什么应该是常见的行为呢？系统故障。
根据规范，您不能，但您可以使用contenteditable 构建类似的东西。

标签： css html

【解决方案1】：

没有。无法将输入中的文本换行作为标准功能。

如果你设法破解它，那将是无效的 HTML。

HTML5 规范：

4.10.5.1.2 Text (type=text) state and Search state (type=search)

input 元素代表一行纯文本编辑控制元素的值。

（强调我的）

【讨论】：

你不能从认为苹果是橙子的人那里得到苹果。一行并不意味着文本不能换行，输入控件不支持换行的单行文本（正如您声称的那样无效）这一事实是一个无效的假设。多行表示有换行符，而单行实际上表示没有换行符。所以实际上，这家伙要苹果，每个人都递给他橘子。
请不要将我的声明作为您发表评论的依据。使用官方参考，简单明了地说明："...one line plain text..."。据我所知，你真的无法解决这个问题。但是，如果您想为“一条线”的定义提供官方参考，以支持您的 cmets 中的主张，请继续。这实际上比简单的批评和否决更有帮助。 @HypersoftSystems

【解决方案2】：

首先，您可能还是想使用textarea - input 不是为此而设计的。

你仍然可以用 css 达到想要的效果。

input {
    word-wrap: break-word;
    word-break: break-word;
    height: 50px;
    width: 100px;
}

&lt;input type="text" value="This line wraps because it is quite long."/&gt;

【讨论】：

我的问题开始于`不-我不想使用 textarea。` 你推荐使用 textarea？反正。你的小提琴不工作
@Brettetete 你用什么检查那个小提琴？ .. 我试过了，效果很好。
我刚刚在其他浏览器中测试了它——它在 Chrome 中运行良好，但在 Firefox、Edge 和 IE 中却不行。因此，对于严肃的 Web 开发来说，这并不是一个真正的选择。
我也测试过，可惜不能跨浏览器
显然它在 Chrome 50 上停止工作了。:(