Tyler’s “Wrapping Text Inside PRE Tags” is a life saver bit of CSS for those like me who include code markup in your blog pages.
<pre> HTML tag wraps around text and makes it look like typewriter text. It also has an annoying feature to display text EXACTLY as it is written. Lines break where the break, and don’t when they don’t. When the code lines exceed the width of column, they overlap or push the neighboring container such as a sidebar, or even the width of the page, out and sometimes down, rearranging the web page design layout. Annoying!
Yet, we still need a way to display HTML, PHP, CSS, and other code within our post content without stressing our web page design. Many of us fix this manually by creating very short lines when we can, or using gimmicks like # or + to artificially create line breaks, leaving instructions to our users to remove the # or + to remove line breaks before using the code. It’s a pain.
With the code found on Tyler’s article, all it takes is a little CSS on the
<pre> in your stylesheet to force the
<pre> to wrap the text around. The code works across various browsers, a nice touch.
If you write a lot of code on your blog and use the PRE tag a lot, then consider adding these CSS PRE tag wrap styles to your stylesheet.
HINT: If you are in a hurry to use this, the last example in the article is the one you want. 😉
- HTML, CSS, PHP, and More Cheat Sheets
- Finding Your CSS Styles in WordPress
- WordPress.com Custom CSS – All The Styles for the Sandbox Theme
- Secrets of WordPress Theming
- My WordPress Theme is Broken
- The Secret of Successful Editing of WordPress Themes
- Designing a WordPress Theme From Scratch
- Designing a WordPress Theme – Building a Sandbox
- CSS: Studying Your CSS Styles
- CSS and Web Page Design List of Resources
- When the Blog Breaks: Fixing Your Broken Blog
- Validating the Code Behind the Page
Site Search Tags: css, web page design, pre, tags, html, wrap pre tag text, wrap pre, wrap text, writing code, write code, write code in posts, post content, format code
Copyright Lorelle VanFossen, member of the 9Rules Network