Latest TweetsAll o' me plugins freshly updated and ready for WP 5.0 :) profiles.wordpress.org/special…
Perishable Press

Wrapping Long URLs and Text Content with CSS

Quick tutorial post today. To wrap long URLs, strings of text, and other content, just apply this carefully crafted chunk of CSS code to any block-level element (e.g., perfect for <pre> tags):

pre {
	white-space: pre;           /* CSS 2.0 */
	white-space: pre-wrap;      /* CSS 2.1 */
	white-space: pre-line;      /* CSS 3.0 */
	white-space: -pre-wrap;     /* Opera 4-6 */
	white-space: -o-pre-wrap;   /* Opera 7 */
	white-space: -moz-pre-wrap; /* Mozilla */
	white-space: -hp-pre-wrap;  /* HP Printers */
	word-wrap: break-word;      /* IE 5+ */
	}

Explanation

By default, the white-space property is set to normal. So you might see something like this when trying to force long URLs and other continuous strings of text to wrap:

[ pre box with long URL extending beyond width ]

To force long, continuous strings of text to wrap within the width of our <pre> content (or other block-level element, such as <div> and <p>), we need a different value for the white-space property. Here are our options:

  • normal – Default value for the white-space property. Sequences of whitespace are collapsed to a single whitespace. <pre> content will wrap at whitespaces according to the width of the element.
  • nowrap – Sequences of whitespace are collapsed to a single whitespace. <pre> content will wrap to the next line ONLY at explicit <br /> elements.
  • pre – All whitespace is preserved. <pre> content will wrap at implicit line breaks. This is the default behavior of the <pre> element.
  • pre-line – Sequences of whitespace are collapsed to a single whitespace. <pre> content will wrap at whitespaces and line breaks according to the width of the element.
  • pre-wrap – All whitespace is preserved. <pre> content will wrap at whitespaces and line breaks according to the width of the element.
  • inherit – Value of white-space inherited from parent element.

In a perfect world, we could simply use white-space:pre-line, like so:

pre {
	white-space: pre-line;
	width: 300px;
	}

Although the white-space property is supported by all major browsers, unfortunately many of them fail to apply the property to long strings of continuous text. Different browsers will wrap long strings, but they require different white-space values in order to work. Fortunately, we can apply the required values for each browser by including multiple white-space declarations in our pre selector. This is exactly what we are doing with the CSS code solution presented at the beginning of this article.

[ pre box with long URL wrapping within width ]

The comments included in the CSS solution explain which declarations are targeting which browsers. Notice that some of the rules are browser-specific (using vendor-specific prefixes), while others declare standard values from different CSS specifications. The funky word-wrap property is a proprietary Microsoft invention that has been included with CSS3. And thanks to the CSS forward compatibility guidelines, it’s perfectly fine to include multiple instances of the same property. In a nutshell:

  • Unrecognized properties are ignored
  • For multiple instances of the same property, only the last rule will be applied

The code solution presented in this article seems to work fine in every browser I have tested, but it doesn’t validate because of the vendor-specific stuff and the crazy Microsoft thing.

For more complete discussion on text wrapping and all the gruesome details, check out Lim Chee Aun’s excellent post on whitespace and generated content (404 link removed 2014/03/24). And, for a complete guide to pimping your site’s <pre> content, check out my article, Perfect Pre Tags.

Here again is the demo page for this CSS technique.

Jeff Starr
About the Author Jeff Starr = Designer. Developer. Producer. Writer. Editor. Etc.
Archives
33 responses
  1. Code doesn’t work in FF 3.0 . Although it works perfect in 3.5 but text doesn;t wrap to next line in 3. Any workaround for FF 3.0 ? ~ Vicky

  2. Thank you very much!!!

  3. +1 for my web development skills. Excellent and simple tip. I’ll definitely apply this technique to the next iteration of a form tab project I’m working on.

  4. it doesn’t work on table cells. or am i just missing something here..

  5. Great, works on Firefox. Now, all we need is a CSS statement that will get a long URL to wrap on Safari. None of the suggested code currently works on Safari OSX.

  6. Beben Koben January 20, 2011 @ 4:55 am

    sometimes trivial but annoying headache if you do not know the solution…
    thanks for tips my friends^^

  7. Excellent article, solved a little problem I was having with a rather long email address that had to fit in a tight space.

    Best wishes and much success for 2011!

  8. Nice. I will use this. Thanks.

    -hp-pre-wrap ? print vendor specific css. Frightening should that get out of hand.

  9. Chris Cox April 18, 2011 @ 3:16 am

    Maybe I’m missing something here, but for forwards compatibility shouldn’t vendor-specific rules always appear before valid CSS, so future versions of those browsers will pick up on the valid implementation as soon as it’s supported? Also the HP-specific prefix should be abstracted into a print stylesheet.

  10. Just something I noticed when playing with this: If you have any spaces between the opening of your container element and the content, you will end up with an extra line break before your content.

  11. On October 15th, 2010 at 12:44 am, daBayrus commented:

    it doesn’t work on table cells. or am i just missing something here..

    I only found this to be an issue with Internet Explorer.

    Per http://msdn.microsoft.com/en-us/library/ms531186(v=vs.85).aspx#CommunityContentHeader you need table-layout:fixed; on your TABLE element.

    Editor’s note: Hyperlink removed from microsoft resource because the parentheses kept breaking the URL path. Copy/paste the URL to visit.

  12. Thank you. This made viewing a long response string that was driving me nuts more manageable.

[ Comments are closed for this post ]