2

I thought white-space:pre-wrap was a pretty well-supported CSS rule (it doesn't even feature on caniuse) but when I view the result on my phone I see one big wall of text.

Is there any alternative to this, or maybe a compatibility table I can reference?

Piotr Chojnacki
  • 6,837
  • 5
  • 34
  • 65
Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592

1 Answers1

2

pre-wrap

This value behaves as the pre value, except that it adds extra line breaks to prevent the text breaking out of the element's box. (Quirksmode)

From this mozilla post (click the 'mobile' tab) and the fact that the white-space property is tagged there as 'NeedsMobileBrowserCompatibility' (see here ), it seems like white-space is not supported on mobile as yet.

Workaround #1

The word-wrap property is supported in mobile (see here)

So you could produce the same very similar results wrapping the markup in <pre> tags and adding

word-wrap: break-word; to the class. (see this css-tricks post)

Something like this:

Markup

<pre>his is the test        paragraph.
    It has all kinds of odd tabs              and spacing in
the
           HTML source code.
    Should they                 be preserved?</pre>

CSS

pre
{
    width: 100px;
    border: 1px solid orange;
    word-wrap: break-word;
}

FIDDLE

Workaround #2

Wrap the text in a readonly textarea element. The obvious issue with this is that you'll have to know the width/height of your text in advance. (see this SO post)

FIDDLE

Community
  • 1
  • 1
Danield
  • 121,619
  • 37
  • 226
  • 255