Wrapping Text Inside PRE HTML Tags

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. ;-)

“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.

Using the textarea HTML 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 text into code looking text but acts like text.

[…] 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. […]