How to format a long <pre> HTML block suitable for width limited device such as iPhone

Question

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.com/view/bisxytioa.html

Answer 1

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:

Answer 2

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.com/view/bj4d0az5r.html