最优雅的方法来强制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 概述了各种方法.
• 有一个相关的SO问题:"在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）；