Walker News

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   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!

Topic - Howto, Internet   Search - CSS, Hack, Pre, Tag, Wrap

Similar Articles:
» Highlight Author Comment And Pingback In Wordpress Theme
» How to Hide New Blogger Navigation Bar
» STRO Activator Still Works In Vista SP1
» How To View RSS Feed In XML Format With Firefox
» How to Add Recent Comments In New Blogger Template
» How To Embed Adsense Search In New Blogger Template
» How To Add ShareThis Widget In New Blogger Template

↑ Grab this Headline Animator

Navigation:
» HOME - WalkerNews.net
« PREV  - Vista Ultimate Supports Non-Unicode Program
» NEXT  - Enable Full Text Feed In Wordpress 2.2