How to format a long <pre class = "prettyprint-override"> HTML block suitable for width limited device such as iPhone

Question

I have a long pre block, I want it to appear in mobile browsers like iPhone

eg.

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 a phrase, but keep the indentation?

 eg 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 a scroll bar for a mobile device, so it’s better to have some way to automatically compress the word.

The most similar method I've tried is to use CSS

  pre { white-space: pre-line; } 

But not the way I want, as shown above.

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

Answer 1

Here you can do it using Javascript. This goes through <pre> and wraps each section in a <div> with padding-left equal to the number of spaces in the indent. In the demo, I made the <pre> size of the iPhone screen size to demonstrate packaging.

Demo: _{sub> sub>}

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 perfect solution, and maybe not the solution you were looking for, but this solution does the job nonetheless. It uses jQuery to replace the pre-block with a list, since lists preserve padding when wrapping text.

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

Answer 3

Or you can use PHP (or something like that). For example:

Determine which browser / platform was used:

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

And for the mobile OS, you can use the if / else statement with the 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"; ?> 

Answer 4

This works in every mobile browser. I tried them all on iOS and Android if you want screenshots to let me know. All you need is one css tag

 pre { word-wrap:break-word; } 

PRE will automatically fill the container. As long as your container is sized for the width of the screen and has no overflow, it works great (keeps indentation in line breaks).

Answer 5

Wordwrap pre content so you don't exceed fixed s.

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

This may solve your problem.

You can also change the width to a fixed one, no wider than the iphone browser. The key is to wrap the text so that it does not increase the width of the body element more than the screen.

Answer 6

I’m afraid they won’t be able to do this CSS, because CSS does not have “knowledge” about things like the actual textual content of an element, such as leading spaces. Therefore, some other approach is needed. If you control the markup, you can replace the pre element with a div element containing single-line div elements with class attributes corresponding to the desired indent levels. Then you simply specify the appropriate left margins. Demo video:

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

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

This does not handle all the pre functions, so if you need to keep several spaces inside the line, add white-space: pre-wrap .

An even more logical approach would be to use div elements nested so that the nesting depth matches 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 something on the client side (convert the pre element to other elements), similar to the code in the AncientMans clause.