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

Question

此文本文件包含换行符：

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

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

Chrome工作正常，并且与原始文件中的文本完全相同。换行仅在行尾。滚动在x和y中有效。

Chrome textarea：

Firefox textarea在一行中：

如何使它们行为相同？只在文本文件中的换行后换行

Answer 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动态添加或删除样式块。