最优雅的方法来强制TEXTAREA元素换行，*无论*空格

Question

Html Textarea元素只有在到达空格或制表符时才会换行。这很好，直到用户键入一个looooooooooooooooooooo足够的单词。我正在寻找一种严格执行换行符的方法（例如：即使它导致“loooooooooooo \ n ooooooooooong”）。

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

注意：我在这里指的是“textarea”元素（即：与文本输入行为类似的元素） - 而不仅仅是一个普通的旧文本块。

Answer 1

CSS设置word-wrap:break-word和text-wrap:unrestricted似乎是CSS 3功能。祝你在当前的实现中找到一种方法。

Answer 2

• quirksmode.org有overview of various methods。
• 有一个相关的SO问题："In HTML, how to word-break on a dash?"
• 在支持它的浏览器中，word-wrap: break-word也可能会产生预期的效果。

Answer 3

以textarea宽度大小打破长词：

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 word wrap is not working

@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

Firefox，http://developer.mozilla.org/En/HTML/Element

Internet Explorer，http://msdn.microsoft.com/en-us/library/ms535917(VS.85).aspx

和Opera。

Answer 5

我测试了＆lt; wbr＆gt; ，＆amp;＃8203; 和＆amp; shy; 技术。这三个在IE 7，Firefox 3和Chrome中运行良好。

唯一没有破坏复制/粘贴的是＆lt; wbr＆gt; 标记。

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>