强制 TEXTAREA 元素换行的最优雅的方式，*不管*空白

Question

Html Textarea 元素仅在到达空格或制表符时换行。这很好，直到用户输入足够多的单词。我正在寻找一种严格执行换行符的方法（例如：即使结果是“loooooooooooo ooooooooooong”）。

我发现的最好的方法是在每个字母后添加一个零宽度的 unicode 空格，但这会破坏复制和粘贴操作。有人知道更好的方法吗？

笔记：我在这里指的是“textarea”元素（即：其行为类似于文本输入）——而不仅仅是一个普通的旧文本块。

Answer 1

CSS 设置 word-wrap:break-word 和 text-wrap:unrestricted 似乎是 CSS 3 的特性。祝你好运，找到一种方法来在当前的实现中做到这一点。

Answer 2

• quirksmode.org 有一个 各种方法概述.
• 有一个相关的问题： “在 HTML 中，如何在破折号上断字？”
• 在支持它的浏览器中， word-wrap: break-word 也可能会达到预期的效果。

Answer 3

在文本区域宽度大小处断开长单词：

1) 对于现代浏览器：

textarea { word-break: break-all; }

2）为了兼容IE8添加：

textarea { -ms-word-break: break-all; }

https://msdn.microsoft.com/en-us/library/ms531184%28v=vs.85%29.aspx

3）添加IE11兼容性破解：

Internet Explorer 11 自动换行不起作用

@media all and (-ms-high-contrast:none) {
*::-ms-backdrop, textarea { white-space: pre; } 
}

---

这段代码运行良好：

-IE 11、Chrome 51、Firefox 46（Windows 7）；

-IE 8、Chrome 49、Firefox 18（Windows XP）；

-Edge 12.10240、Opera 30（Windows 10）；

Answer 4

有至少受支持的非标准元素 wbr

火狐浏览器， http://developer.mozilla.org/En/HTML/Element

IE浏览器， http://msdn.microsoft.com/en-us/library/ms535917(VS.85).aspx

和歌剧。

Answer 5

我测试了 <br>, &#8203; 和 ­ 技术。这三者在 IE 7、Firefox 3 和 Chrome 中运行良好。

唯一没有破坏复制/粘贴的是 <br> 标签。

Answer 6

根据我的测试，当前浏览器中只有 Firefox 具有所描述的行为。所以我想你最好的选择是等待即将发布的 Firefox 3.1 来解决你的问题:)

Answer 7

最优雅的方法是使用 wrap="soft" 用于包裹整个单词或 wrap="hard" 用于按字符换行或 wrap="off" 尽管最后一个根本没有包装 wrap="off" 通常不需要，因为浏览器会自动使用，就像它是一样 wrap="off".
例子：

<textarea name="tbox" cols="24" rows="4" wrap="soft"></textarea>