Cross browser issue with line breaks: Display text from ajax call in textarea

Question

This text-file has got line breaks:

For display the text in the textarea I use the following style:

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

Chrome works fine and display the text exactly like in the original file. The wraps are only at the end of line. Scroll is active in x and y.

Chrome textarea:

Firefox textarea in one line:

How to make them act the same? Only wrap after line break in the textfile??

Answer 1

One rather hackish solution is to use the -moz- version of the @document rule. Since only Mozilla recognises things starting with -moz-, you can use it to write CSS for Mozilla only.

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>

This solution is volatile though. Since vendor prefixes like -moz- are meant to be temporary, I have no idea how long this will keep working.

Then there's IE. It used to be you could target IE specifically by writing a conditional comment.

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

However, that is no longer the case (since IE10). So I'm not sure there's a solution for IE, other than resorting to JavaScript to add or remove style blocks dynamically.