1

On IE11 / win7 64 I'm noticing a very weird pattern relating to how words wrap on a textarea.

Example:

example

http://fiddle.jshell.net/fy2aoz28/1/

With that text on the textarea, the second line is almost empty but it has space to at least have to "to :event_name" string.

On chrome that looks like this:

chrome example

So, what's going on here and is there any way to force all browsers on the same behavior?

AlfaTeK
  • 7,487
  • 14
  • 49
  • 90
  • Add `white-space: pre`. Meaning sequences of whitespace are preserved, lines are only broken at newline characters in the source and at
    elements. http://fiddle.jshell.net/fy2aoz28/2/. Should look the same in IE and Chrome.     – Chris Yongchu Sep 05 '15 at 03:52

1 Answers1

2

Add the white-space property. It is used to describe how whitespace inside an element is handled.

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

Should look the same in Chrome and IE now. Here's a fiddle for you to review. http://fiddle.jshell.net/fy2aoz28/2/

Chris Yongchu
  • 789
  • 3
  • 8
  • That's weird. I was reading from http://stackoverflow.com/a/20327197 and I tried with pre-wrap with no luck. white-space: pre works and now chrome and IE works the same way. It seems pre-wrap or 'normal' don't work as supposed on IE11? If someone can provide a more detailed explanation on what's going on here it will be appreciated... I solved the problem but don't understand the solution. – AlfaTeK Sep 05 '15 at 04:18
  • Chris Coyier provides a great explanation and gives examples. You can read it here: https://css-tricks.com/almanac/properties/w/whitespace/. *White space using `pre` is honored exactly as it is in the HTML and the text does not wrap until a line break is present in the code.* – Chris Yongchu Sep 08 '15 at 17:59
  • I didn't ask for it on the original question but so you know: on Firefox the display behavior is different, it's doesn't break lines – AlfaTeK Sep 21 '15 at 07:37
  • What version of Firefox? You might have to use `-moz` for earlier versions of Gecko. Like `textbox { white-space: pre; white-space: -moz-pre; ... }` – Chris Yongchu Sep 21 '15 at 18:49
  • I think something changed Chrome in these months. Tested on 52.0.2743.116 and now using 'pre' in chrome causes the textarea to never wrap and only have content in 1 big line. IE 11 wraps the content just fine. Using pre-wrap causes again the different behaviour of IE and Chrome wrapping at different points. – AlfaTeK Sep 12 '16 at 03:10
  • OK, I can confirm that the behaviour of the fiddle changed on Chrome 49. After that version the textarea text doesn't wrap to multiple lines, instead being a single big line. On IE 11 it wraps. On Firefox 48.0.2 it's the same as Chrome. So basically the answer doesn't work anymore :( – AlfaTeK Sep 12 '16 at 03:31