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

Posted 2023-03-05

【中文标题】强制 TEXTAREA 元素换行的最优雅方式，*不管*空格

【英文标题】：Most elegant way to force a TEXTAREA element to line-wrap, *regardless* of whitespace

【发布时间】：2010-09-08 01:11:15

【问题描述】：

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

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

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

【参考方案1】：

以 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);

【讨论】：

word-break: break-all 做到了！ tyvm

【参考方案2】：

最优雅的方法是使用wrap="soft" 换行整个单词或使用wrap="hard" 换行字符或wrap="off" 根本不换行尽管最后一个wrap="off" 通常不需要，因为浏览器会自动使用自动好像是wrap="off"。 示例：

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

【参考方案3】：

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

【参考方案4】：

CSS 设置 word-wrap:break-word 和 text-wrap:unrestricted 似乎是 CSS 3 功能。祝你好运找到在当前实现上执行此操作的方法。

【讨论】：

刚刚意识到 Facebook 的表单做得很好，我必须进去看看他们在做什么。要么，要么等到浏览器支持您提到的属性 - 打破我在最终将如此简单的事情上浪费一千行 javascript 的困难

不会很久（耶耶耶耶耶）！ Firefox 3.1 中的新开发人员功能“自动换行：这个新支持的属性允许内容指定是否可以在单词中分行，以防止在其他不可分行的字符串太长而无法容纳一行时溢出。”跨度>

太棒了！我很高兴这很快就在一起了；没有这个功能真是太愚蠢了。

【参考方案5】：

我测试了 、​ 和 ­ 技术。这三个都在 IE 7、Firefox 3 和 Chrome 中运行良好。

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

【讨论】：

afaik 你不能在 textarea 中插入 html 元素，所以这行不通

【参考方案6】：

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

【参考方案7】：

至少有非标准元素 wbr 支持

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

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

和歌剧。

【讨论】：

afaik 你不能在 textarea 中插入 html 元素，所以这行不通

你是对的。但是看看修订版...此时没有提到“textarea”；）