Skip navigation

Wrapping Text Inside PRE HTML Tags

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!

PRE HTML tag text will not wrap so the lines push your web design layout around and overlap

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


Site Search Tags: , , , , , , , , , , , ,
Copyright Lorelle VanFossen, member of the 9Rules Network

Member of the 9Rules Blogging Network

15 Comments

  1. Posted October 5, 2006 at 8:12 am | Permalink

    Lorelle, thanks for the linkage!!

  2. Posted October 5, 2006 at 10:10 am | Permalink

    And thank you!

  3. Posted October 5, 2006 at 11:40 am | Permalink

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

  4. Posted October 5, 2006 at 1:57 pm | Permalink

    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?

  5. Posted October 5, 2006 at 5:43 pm | Permalink

    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.

  6. Posted October 10, 2006 at 8:19 am | Permalink

    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.

  7. Posted October 10, 2006 at 8:52 am | Permalink

    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.

  8. Posted June 14, 2007 at 9:52 pm | Permalink

    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.

  9. Posted June 17, 2007 at 9:32 am | Permalink

    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.

  10. Posted June 17, 2007 at 9:33 am | Permalink

    also, tyler’s code doesn’t validate.

  11. Nuwan Asanka
    Posted December 29, 2007 at 6:38 am | Permalink

    Really thanks.

    This is lots of help to me.

  12. Cameron Webster
    Posted April 8, 2008 at 2:48 pm | Permalink

    great help

  13. kuncen warnet
    Posted September 12, 2010 at 3:35 am | Permalink

    how to insert <pre> tag in blogspot? is it the same?
    thank you for your help

    • Posted September 12, 2010 at 9:47 am | Permalink

      You’ll have to check with Blogspot help and support for that answer.

  14. Udeshika
    Posted March 26, 2011 at 8:58 am | Permalink

    thanks, pre tag headache is gone now


4 Trackbacks/Pingbacks

  1. [...] Wie ich bei Lorelle gelesen habe, hat Tyler eine Lösung für diese Problematik gefunden. Mit etwas CSS-Code kann man einen [...]

  2. [...] Text Inside PRE Tags [Thanks, Lorelle VanFossen] Written by Amit Agarwal for Digital Inspiration. All Rights [...]

  3. […] Wrapping Text Inside PRE HTML Tags […]

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

Post a Comment

Follow

Get every new post delivered to your Inbox.

Join 21,007 other followers

%d bloggers like this: