PROBLEM:
pre tags are super-useful for code blocks in HTML and for debugging output while writing scripts, but how to make the text word-wrap instead of printing out one long line?
SOLUTION 1:
CSS:
[pastacode lang=”css” manual=”pre%20%0A%7B%0A%20%20%20%20white-space%3A%20pre-wrap%3B%20%20%20%20%20%20%20%2F*%20Since%20CSS%202.1%20*%2F%0A%20%20%20%20white-space%3A%20-moz-pre-wrap%3B%20%20%2F*%20Mozilla%2C%20since%201999%20*%2F%0A%20%20%20%20white-space%3A%20-pre-wrap%3B%20%20%20%20%20%20%2F*%20Opera%204-6%20*%2F%0A%20%20%20%20white-space%3A%20-o-pre-wrap%3B%20%20%20%20%2F*%20Opera%207%20*%2F%0A%20%20%20%20word-wrap%3A%20break-word%3B%20%20%20%20%20%20%20%2F*%20Internet%20Explorer%205.5%2B%20*%2F%0A%7D%0A” message=”css code” highlight=”” provider=”manual”/]
[ad type=”banner”]
SOLUTION 2:
This works great to wrap text and maintain white-space within the pre-tag:
[pastacode lang=”css” manual=”pre%0A%7B%0A%20%20%20%20white-space%3A%20pre-wrap%3B%0A%7D%0A” message=”css code” highlight=”” provider=”manual”/]
SOLUTION 3:
Skipping the pre tag and using white-space: pre-wrap on a div is a better solution.
[pastacode lang=”markup” manual=”%3Cdiv%20style%3D%22white-space%3A%20pre-wrap%3B%22%3Econtent%3C%2Fdiv%3E%0A” message=”html code” highlight=”” provider=”manual”/]
SOLUTION 4:
[pastacode lang=”css” manual=”pre%20%0A%7B%0A%20white-space%3A%20normal%3B%20%0A%7D%0A” message=”css code” highlight=”” provider=”manual”/]
[ad type=”banner”]
to maintain the monospace font but add word-wrap,
or
[pastacode lang=”css” manual=”pre%20%0A%7B%0A%20overflow%3A%20auto%3B%20%0A%7D%0A” message=”css code” highlight=”” provider=”manual”/]
which will allow a fixed size with horizontal scrolling for long lines.
SOLUTION 5:
[pastacode lang=”css” manual=”%20%20pre%20%0A%7B%0A%20%20%20%20%20%20%20%20white-space%3A%20pre-wrap%3B%20%20%20%20%20%20%20%2F*%20CSS%203%20*%2F%0A%20%20%20%20%20%20%20%20white-space%3A%20-moz-pre-wrap%3B%20%20%2F*%20Mozilla%2C%20since%201999%20*%2F%0A%20%20%20%20%20%20%20%20white-space%3A%20-pre-wrap%3B%20%20%20%20%20%20%2F*%20Opera%204-6%20*%2F%0A%20%20%20%20%20%20%20%20white-space%3A%20-o-pre-wrap%3B%20%20%20%20%2F*%20Opera%207%20*%2F%0A%20%20%20%20%20%20%20%20word-wrap%3A%20break-word%3B%20%20%20%20%20%20%20%2F*%20Internet%20Explorer%205.5%2B%20*%2F%0A%20%20%20%20%20%20%20%20padding%3A0px%3B%0A%20%20%20%20%20%20%20%20margin%3A0px%0A%20%7D%0A” message=”css code” highlight=”” provider=”manual”/]
SOLUTION 6:
You can try using this code :
[pastacode lang=”css” manual=”%3Cpre%20style%3D%22white-space%3Anormal%3B%22%3E.%20″ message=”css code” highlight=”” provider=”manual”/]
SOLUTION 7:
To get line breaks and shows exact code or text: (chrome, internet explorer, Firefox)
CSS:
[pastacode lang=”css” manual=”xmp%0A%7B%20%0Awhite-space%3Apre-wrap%3B%20word-wrap%3Abreak-word%3B%20%0A%7D%0A” message=”css code” highlight=”” provider=”manual”/]
[ad type=”banner”]
HTML:
[pastacode lang=”markup” manual=”%3Cxmp%3E%20your%20text%20or%20code%20%3C%2Fxmp%3E%0A” message=”html code” highlight=”” provider=”manual”/]
SOLUTION 8:
This is one of the solution :
[pastacode lang=”css” manual=”pre%0A%20%7B%0A%20%20%20%20white-space%3A%20normal%3B%0A%20%20%20%20word-wrap%3A%20break-word%3B%0A%7D%0A” message=”css code” highlight=”” provider=”manual”/]
[ad type=”banner”]
SOLUTION 9:
Text in <pre> tags doesn’t wrap by default. If this is causing layout problems, one solution is to give the pre block an overflow property to hide the excess or cause it to scroll. The other solution is to have it wrap.
[pastacode lang=”css” manual=”%2F*%20Browser%20specific%20(not%20valid)%20styles%20to%20make%20preformatted%20text%20wrap%20*%2Fpre%20%7B%0A%20white-space%3A%20pre-wrap%3B%20%20%20%20%20%20%20%2F*%20css-3%20*%2F%0A%20white-space%3A%20-moz-pre-wrap%3B%20%20%2F*%20Mozilla%2C%20since%201999%20*%2F%0A%20white-space%3A%20-pre-wrap%3B%20%20%20%20%20%20%2F*%20Opera%204-6%20*%2F%0A%20white-space%3A%20-o-pre-wrap%3B%20%20%20%20%2F*%20Opera%207%20*%2F%0A%20word-wrap%3A%20break-word%3B%20%20%20%20%20%20%20%2F*%20Internet%20Explorer%205.5%2B%20*%2F%0A%7D%0A” message=”css code” highlight=”” provider=”manual”/]
SOLUTION 10:
All you need to do is add this one pieces of code to your stylesheet and your text will wrap nicely.
[pastacode lang=”css” manual=”pre%20%0A%7B%0A%20%20white-space%3A%20pre-wrap%3B%20%20%20%20%20%20%20%2F*%20css-3%20*%2F%0A%20%20white-space%3A%20-moz-pre-wrap%3B%20%20%2F*%20Mozilla%2C%20since%201999%20*%2F%0A%20%20white-space%3A%20-pre-wrap%3B%20%20%20%20%20%20%2F*%20Opera%204-6%20*%2F%0A%20%20white-space%3A%20-o-pre-wrap%3B%20%20%20%20%2F*%20Opera%207%20*%2F%0A%20%20word-wrap%3A%20break-word%3B%20%20%20%20%20%20%20%2F*%20Internet%20Explorer%205.5%2B%20*%2F%0A%7D%0A” message=”css code” highlight=”” provider=”manual”/]