使用 IE11 在 textareas 上进行奇怪的文本换行答案

【问题标题】：Weird text wrap on textareas with IE11使用 IE11 在 textareas 上进行奇怪的文本换行
【发布时间】：2015-12-01 06:35:36
【问题描述】：

在 IE11 / win7 64 上，我注意到一个非常奇怪的模式与文字在文本区域上的换行方式有关。

例子：

在 textarea 上使用该文本，第二行几乎是空的，但它至少有空间来“to :event_name”字符串。

在 chrome 上看起来像这样：

那么，这里发生了什么？有什么方法可以强制所有浏览器都采取相同的行为？

【问题讨论】：

添加white-space: pre。保留空格的含义序列，仅在源中的换行符和
元素处换行。 fiddle.jshell.net/fy2aoz28/2。在 IE 和 Chrome 中应该看起来一样。

【解决方案1】：

添加white-space 属性。它用于描述如何处理元素内的空白。

textarea{
    width: 300px;
    height: 200px;
    white-space: pre;
}

现在在 Chrome 和 IE 中应该看起来一样。这里有一个小提琴供你复习。 http://fiddle.jshell.net/fy2aoz28/2/

【讨论】：

这很奇怪。我正在阅读stackoverflow.com/a/20327197，我尝试使用预包装但没有运气。 white-space: pre works，现在 chrome 和 IE 的工作方式相同。似乎预包装或“正常”在 IE11 上无法正常工作？如果有人可以就这里发生的事情提供更详细的解释，我们将不胜感激......我解决了问题，但不理解解决方案。
Chris Coyier 提供了很好的解释并举例说明。你可以在这里阅读：css-tricks.com/almanac/properties/w/whitespace。 使用 pre 的空格完全符合 HTML 中的情况，并且在代码中出现换行符之前文本不会换行。
我没有在最初的问题上要求它，但你知道：在 Firefox 上，显示行为不同，它不会换行
什么版本的火狐？对于早期版本的 Gecko，您可能必须使用 -moz。喜欢textbox { white-space: pre; white-space: -moz-pre; ... }
我认为这几个月里 Chrome 发生了一些变化。在 52.0.2743.116 上测试，现在在 chrome 中使用“pre”会导致 textarea 永远不会换行，并且只有 1 大行中的内容。 IE 11 很好地包装了内容。使用 pre-wrap 会再次导致 IE 和 Chrome 在不同点的不同行为。