Walker News

CSS Hack Wraps Long Text In Pre Tag

By default, any compliance web browsers will ignore extra blank spaces found in the text being rendered. Meaning that, if you purposely putting 2 blank spaces between 2 words, the extra 1 blank space will be removed. For example, Walker  News will becomes Walker News.

This will be very painful and inconvenient if you’re posting code snippets into web pages!
To overcome this “glitch”, you can either
  1. Force the web browser to preserve extra blank spaces by replacing them with   (which is a HTML Entity that represents non-breaking space!)
  2. Enclose the text / code-snippet that filled with extra blank spaces into a pair of <pre></pre> HTML tag.

First method is definitely a tedious coding task if you’re posting a program source code. Second method is much convenient, but it’s not a forever “piece of mind” approach!

Unless the post body / column is big enough, the <pre></pre> HTML tag will NOT automatically wrapping a long text (such as the .Net NameSpace or Windows Registry path) in a narrow, fix-length post body! However, there is CSS hack for PRE tag that seems able to really solve all these glitches perfectly!.
Knowing that limitation, but without Googling for a trick, I posted a Date-Time calculation C program source code, with the first method! Imagine how stupid I was, to replace tonnes of &nbsp; in the C program source code before posting it.

“It was really tedious and non-efficient, but it works well for my case.”, I thought.

How to wrap a long text / code snippet in PRE HTML tag – a smarter way? Many thanks to T. Longren for sharing his wonderful CSS hack that’s able to automatically wrap long text in a pair of PRE HTML tag:
pre {
 white-space: pre-wrap;       /* css-3 */
 white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
 width: 99%;   /* remove horizontal scroll-bar when viewing in IE7 */

As you can see here, the block of his CSS code that enclosed in a pair of PRE HTML tag is nicely rendering in most CSS-compatible web browsers, after applying his CSS trick for PRE tag!

Custom Search

  1. Simple JavaScript Extract Login Form Password – Walker News 16-07-07@23:14

    […] This JavaScript snippet is supposed rendering nicely with CSS hack on PRE tag […]

  2. drimsun 02-03-08@03:57

    Cheers man, you made my day!

2017  •  Privacy Policy