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
Source: Tips4all
Source: Tips4allSource: CCNA FINAL EXAM
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.
ReplyDeleteDemo: http://jsfiddle.net/ThinkingStiff/v2JTR/
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.
ReplyDeletehttp://pastehtml.com/view/bj4d0az5r.html
Or you could use PHP (or anything like that). For example:
ReplyDeleteDetect 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";
?>
Wordwrap the content of the pre so that you do not exceed the fixed with.
ReplyDeletepre {
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.
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
ReplyDeletepre {
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).
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:
ReplyDeletehttp://pastehtml.com/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.