css - 带有换行符的跨浏览器问题 : Display text from ajax call in textarea

Question

此文本文件有换行符:

为了在文本区域中显示文本，我使用以下样式:

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

Chrome 运行良好，显示的文本与原始文件中的文本完全一样。换行仅在行尾。滚动在 x 和 y 轴上处于事件状态。

Chrome 文本区域:

一行中的 Firefox 文本区域:

如何让他们表现得一样？仅在文本文件中换行后换行？？

Answer 1

一个相当hackish 的解决方案是使用@document 规则的-moz- 版本。由于只有 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 来动态添加或删除样式 block 。