I have a long pre block, I want it to be view in mobile browsers, such as iPhone

e.g.

a very long pre block start here here here here here here here here here here
    2nd line with intent
        3rd line with intent

How to make make the wordwrap, but keep the indentations?

e.g.
    a very long pre block start here here here here here here 
    here here here here
        2nd line with intent
            3rd line with intent

I don't want to have scrollbar for mobile device, so better to have some way to auto word-wrap the sentence.

The most similar method I have tried is to use CSS

 pre {
            white-space: pre-line;
        }

But not exactly as I want as demonstrated above.

Updated: Link: .html

I have a long pre block, I want it to be view in mobile browsers, such as iPhone

e.g.

a very long pre block start here here here here here here here here here here
    2nd line with intent
        3rd line with intent

How to make make the wordwrap, but keep the indentations?

e.g.
    a very long pre block start here here here here here here 
    here here here here
        2nd line with intent
            3rd line with intent

I don't want to have scrollbar for mobile device, so better to have some way to auto word-wrap the sentence.

The most similar method I have tried is to use CSS

 pre {
            white-space: pre-line;
        }

But not exactly as I want as demonstrated above.

Updated: Link: http://pastehtml./view/bisxytioa.html

• javascript
• android
• iphone
• html
• css

• try this:pre{white-space:pre-wrap;word-wrap:break-word} – dotslashlu Commented Dec 28, 2011 at 6:36
• now, are the 2nd and 3rd lines part of the text above it? or do you want new lines created with further indentations? – Michael Rader Commented Dec 28, 2011 at 6:54
• @LotusH, Yes, quite similar, see: pastehtml./view/bisykurru.html, except the new line does not align with the same as the 1st line – Howard Commented Dec 28, 2011 at 7:42
• @Howard what do you mean by 'does not align with the same as the 1st line'? Do you want them start at the same position and don't want the indents? If so, only 'word-wrap:break-word' will do. – dotslashlu Commented Dec 28, 2011 at 7:47
• @LotusH, when you resize this page in your browser: pastehtml./view/bisykurru.html, when width get smaller, the string will wrapped into 2nd line, but it is not following the same intentation of the 1st line. – Howard Commented Dec 28, 2011 at 9:12

6 Answers 6

Here's a way to do it with Javascript. This goes through the <pre> and wraps each section in a <div> with padding-left equal to the number of spaces of indentation. In the demo I made the size of the <pre> the size of an iPhone screen to demonstrate the wrapping.

Demo:

Script:

var pre = document.getElementById( 'pre' ),
    sections = pre.textContent.trim().split( '\n' ),
    paddingPerChar = 9;

for( var index=0, html='', padding=0; index < sections.length; index++ ) {
    padding = ( sections[index].length - sections[index].trim().length ) *  paddingPerChar;
    html += '<div style="padding-left:' + padding + 'px;">' + sections[index].trim() + '</div>';
};

pre.innerHTML = html;

HTML:

<pre id="pre">
1. a very long pre block start here here here here here here here here here here
    A. 2nd line with indent long pre block start here here here here here here here here here
        a. 3rd line with indent
    B. 4th line th indent long pre block start here here here here here here here her
    C. 5th line
2. 6th Line
</pre>

CSS:

pre {
    border: 1px solid black;
    height: 460px;
    width: 320px;    
    white-space:pre-wrap;
}

Output:

Not the most ideal solution, and probably not the solution you were looking for, but it's a solution none the less that does the job. It uses jQuery to replace the pre block with a list, as lists preserve indents on text wrapping.

http://pastehtml./view/bj4d0az5r.html

Or you could use PHP (or anything like that). For example:

Detect what browser / platform has been used:

$browser = get_browser(null, true);
print_r($browser);

And for mobile OS's you could use an if/else statement with a wordwrap function to break and display your content. For example:

<?php
$text = "A very long woooooooooooord.";
$newtext = wordwrap($text, 8, "\n", true);

echo "$newtext\n";
?>

This works in every mobile browser I have tried them all on iOS & Android if you want screen shots let me know. All that is needed is one css tag

pre {
    word-wrap:break-word;
}

PRE will fill its container automatically. As long as your container is sized to the width of the screen and has no overflow this works perfectly (preserves indents across word-wrapped line-breaks).

Wordwrap the content of the pre so that you do not exceed the fixed with.

pre {
 width:100%;
 word-wrap:break-word;
}

this may fix your problem.

you could also change width to a fixed with no wider than the iphone browser. The key is to wrap the text though so that it does not force the width of the housing element to be larger than the screen.

I’m afraid there’s no way to do it CSS, because CSS has no “knowledge” of things like the actual textual content of an element, like the leading spaces. So some different approach is needed. If you have control over the markup, you could replace the pre element by a div element containing single-line div elements with class attributes corresponding to the desired indentation levels. Then you just specify suitable left margins. Demo:

http://pastehtml./view/bjbgnb1v3.html

(The demo sets the left margin in ch units but uses a setting in em units as a reasonable backup. For a monospace font, one em is close to the width of two characters.)

This doesn’t handle all the features of pre so if multiple whitespace inside a line needs to be preserved, add white-space: pre-wrap.

An even more logical approach would be to use div elements nested so that the depth of nesting corresponds to the level of indentation. This would make the stylesheet simple but the markup would look awkward.

If you cannot control the HTML markup, you may need to do things client-side (convert the pre element to other elements), similarly to the code in AncientMan’s suggestion.