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.
The <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. 😉
Related Articles
- 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
Lorelle on WordPress 
15 Comments
Lorelle, thanks for the linkage!!
And thank you!
“It also has an annoying feature to display text EXACTLY as it is written.”
Wow, I can’t believe you just said that. It’s not an annoying feature, it’s the whole point of the tag, means preformatted text. It’s supposed to display the text exactly as written, that’s why it works so well for code, it doesn’t mess with the formatting. You may as well have complained about the h1 tag making your font bigger, or the link take annoyingly making links. Great blog btw, but c’mon.
Just because it displays it “exactly” doesn’t mean it has to break your blog’s design. Even preformatted text can be “styled”. The technique offered still works, it just displays the code without the code breaking the design. You don’t have to use it.
Which is better? (1) This is the code but you have to fix it when you copy it because it scrolls off the screen if we leave the code long. (2) Or the code is in an iframe because it won’t fit within the design, but iframed text isn’t included in search engine searches so if someone is looking for the specific code reference, it won’t be in search results? (3) Or just let it overlap and look horrid because that’s just they way the code works?
(4) Or use a little CSS to make the PRE code wrap without any fussing, mussing, or putzing. Copy and paste to use the code. Easy and simple.
I think that’s a helpful idea for those who produce a lot of code within their post content.
Besides, a lot of people style their PRE tag, including giving it a background color, margins, padding, font-size, and more, trying to make the code they publish in their blogs to appear distinguished from the rest of the text. What’s a little wrap going to hurt?
I didn’t have anything against styling your pre tags, I was simply commenting on the comment itself. Say the pre tags are annoying because they pre format your text just seems… well my first thought upon reading it was, “well duh!”. It was a single absurd statement in an otherwise fine post.
The textarea tag works much better! You can style it in the tag or in your CSS. I use both. Don’t know if it will display properly in the comment box. If not, you can look it up.
Using the
textareaHTML tag is like using a hammer when you need a screwdriver. Wrong tool. It will work, but you might not like the results.The textarea html tag has a specific use for comments and forms. Using it within your post content area is an improper use and can cause problems.
However, the
<code>tag is another way to write code in pages that does allow some wrapping, as long as a space appears in the code. Without it, it just keeps on going until it encounters a space, just like text. It really is a tag that turns textinto code looking text but acts like text.Your graphic is a great visual to show your readers exactly what you’re talking about. This is exactly what I’ve been fighting on my home-brewed weblog.
i’m with ramon. the pre tag does exactly what it should.
all it takes is a fixed width and
overflow: auto;to make it look right, and do what it’s supposed to.(the textarea tag will break the wordpress post page, since the post area itself is a textarea)
semantics FTW.
also, tyler’s code doesn’t validate.
Really thanks.
This is lots of help to me.
great help
how to insert <pre> tag in blogspot? is it the same?
thank you for your help
You’ll have to check with Blogspot help and support for that answer.
thanks, pre tag headache is gone now
4 Trackbacks/Pingbacks
[…] Wie ich bei Lorelle gelesen habe, hat Tyler eine Lösung für diese Problematik gefunden. Mit etwas CSS-Code kann man einen […]
[…] Text Inside PRE Tags [Thanks, Lorelle VanFossen] Written by Amit Agarwal for Digital Inspiration. All Rights […]
[…] Wrapping Text Inside PRE HTML Tags […]
[…] Tyler’s Wrapping Text Inside PRE Tags is a great article with tips on how to use CSS to style your <pre> tag to do some line wrapping. I reviewed this technique in Wrapping Text Inside PRE HTML Tags. […]