Getting OSX Safari to honor css “white-space: pre”

Question

I have a blog where I am using ccs style="white-space: pre" with div elements. I am doing this to display lots of code samples or cli output within the blog.. and have to copy and paste that text into the html pages.

I want the source code to be easily readable, so wish to use "white-space: pre" to preserve the white space formatting of the original output when displayed by the browsers.

Chrome and Firefox display the html pages just fine, but for some odd reason... Safari is doing "pre-wrap" when I ask it to do just "pre". I must have the preserve whitespace and nowrap combined features... which is "pre" but is not being honored by safari for osx.

Does anyone have any workaround for this type of problem? It is clear to me from plenty of testing that firefox and chrome support "pre" as defined by CSS white-space property but safari for osx does not. I do not want to use &nbsp as this makes my source htm difficult to read and manage.

thanks in advance for any HELPFUL advise.

Answer 1

I have had this same issue occur on Safari 11.0.3, with a in a jQuery dialog box with "whitespace: pre" formatting. Using a pre tag instead did not fix the issue.

However, adding "word-wrap: normal" to the style for the worked. Here is the final css that I found to work for my scenario:

padding: 15px;
white-space: pre;
word-wrap: normal;
resize: none;
box-sizing: border-box;

Answer 2

I'm still finding this as of March 2018 in Safari 11. Block elements, eg <div> s, with white-space: pre; and overflow: auto; behave differently in Safari than Chrome, Firefox, or Edge. Text will wrap within the container instead of scrolling as it should, as shown in the image Neal included on his post on Google's forums.

The workaround is to use a <pre> element. Safari handles that appropriately, and the other browsers handle it the same.

Answer 3

padding: 15px;
white-space: pre;
word-wrap: normal;
resize: none;
box-sizing: border-box;

It's Working for me .. Th

Answer 4

Safari incorrectly makes overflow-wrap (aka word-wrap ) apply even when white-space is pre . The spec says it should not apply when wrapping is disallowed in the first place, but Safari seems to ignore that.

So, to fix this, combine white-space:pre with word-wrap:normal , and you should be good.