带有换行符的跨浏览器问题：在 textarea 中显示来自 ajax 调用的文本答案

【问题标题】：Cross browser issue with line breaks: Display text from ajax call in textarea带有换行符的跨浏览器问题：在 textarea 中显示来自 ajax 调用的文本
【发布时间】：2016-03-14 14:11:20
【问题描述】：

此文本文件有换行符：

为了在 textarea 中显示文本，我使用以下样式：

textarea.journalctl{ 
     width:       640px; 
     height:      620px; 
     white-space: nowrap;
}

Chrome 运行良好，并且显示的文本与原始文件中的文本完全相同。换行仅在行尾。滚动在 x 和 y 中处于活动状态。

Chrome 文本区域：

Firefox textarea 一行：

如何让它们表现相同？仅在文本文件中换行后换行？

【问题讨论】：

顺便说一句，您的屏幕截图与您的 CSS 不匹配。
哦，这和AJAX无关。静态 HTML 在带有 white-space:nowrap 的两种浏览器中看起来也不同。见fiddle。让我们看看我能做什么。（注意，这里IE同意FF。）
嗯，我似乎无法让它们表现相同...在 Chrome 中，white-space:nowrap 会按照你想要的方式运行。在其他两个浏览器中，您需要white-space:pre。见fiddle。所以，这是不相容的。对不起。
@MrLister ：width: 640px; 被编辑以便更好地阅读。同样是的，ajax 只是一个信息，发生此问题的地方。
有没有办法根据浏览器制定不同的规则？

标签： css

【解决方案1】：

一个相当老套的解决方案是使用-moz- 版本的@document 规则。由于只有 Mozilla 可以识别以 -moz- 开头的内容，因此您只能使用它为 Mozilla 编写 CSS。

textarea {
  width: 16em; height: 4em;
  display: block;
}

/* for all browsers */
#ta1 {
  white-space: nowrap;
}

/* Mozilla only: use for all URLs prefixed with '' (that is, all urls) */
@-moz-document url-prefix() {
  #ta1 {
    white-space: pre;
  }
}

<textarea id="ta1">Line one is very long but shouldn't wrap
line two</textarea>

虽然这个解决方案是不稳定的。由于像 -moz- 这样的供应商前缀是临时的，我不知道这会持续多久。

然后是 IE。过去，您可以通过编写条件注释来专门针对 IE。

<!--[if IE]>
<style>
  #ta1 {
    white-space:pre;
  }
</style>
<![endif]-->

但是，情况不再如此（从 IE10 开始）。所以我不确定IE是否有解决方案，除了求助于JavaScript来动态添加或删除样式块。

【讨论】：

这个解决方案并不优雅，但现在可能是最好的。谢谢。