Save 25% on Wizard’s SQL for WP w/ code: WIZARDSQL
Web Dev + WordPress + Security

Wrapping Long URLs and Text 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 = Creative thinker. Passionate about free and open Web.
Wizard’s SQL for WordPress: Over 300+ recipes! Check the Demo »

33 responses to “Wrapping Long URLs and Text with CSS”

  1. Avatar photo
    Jessi Hance 2010/06/01 9:58 am

    This is amazing. I remember searching for a solution to long URLs breaking layout, and only finding crazy complicated scripted solutions. I had no clue about white-space: pre. I ended up doing some overflow: hidden thing as the least of evils. This is perfect! Thank you so much!

  2. Avatar photo

    So simple yet so effective.

  3. Avatar photo

    Awesome to hear! Hopefully it will serve as a simple and effective reference. Thank you both for the comments. :)

  4. Avatar photo

    nice tip, but i don’t get it working in Opera 10.

    regards

  5. Avatar photo
    Jeff Starr 2010/06/01 8:52 pm

    reADactor, it looks like Opera will soon support (404 link removed 2017/01/27) white-space:pre-line.

  6. Avatar photo
    Jasper van der Kamp 2010/06/02 12:34 am

    word-wrap is now part of CSS3 and also supported by Chrome, Firefox, Opera and Safari.

  7. Avatar photo

    Jasper, yes that is mentioned in the article. Opera doesn’t seem to pick up on it though, as seen with the demonstration. Maybe there is an alternate value that Opera will recognize?

  8. Avatar photo

    I’ve used break-word before for long URLs, but I dind’t know the others.
    thanks!

  9. Michael Hu 2010/06/05 6:37 pm

    So crazy, so beautiful.
    I like it very much. Thanks!!

  10. Avatar photo

    Very cool and useful. I also want to reiterate my vote for a tutorial on how you got such well done drop-caps on your site.

  11. Avatar photo
    Jeff Starr 2010/06/07 5:29 pm

    Vote counted! Working on generalizing the drop-cap technique to accommodate more implementations. As-is, the code is pretty specific to this particular design and uses quite a few browser-specific rules. Once I simplify it, I’ll post it. Thanks for the idea!

  12. Avatar photo

    Thanks!
    It solved my URL-wrapping problem.

Comments are closed for this post. Something to add? Let me know.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
WP Themes In Depth: Build and sell awesome WordPress themes.
Thoughts
The Legend of Zelda: Tears of the Kingdom coming May 12, 2023. Absolutely pumped.
Favorite thing for breakfast is a tall glass of cold water. Hits the spot every time.
Fall is my favorite season :)
Still a few days left before “Unlimited” pro licenses are no longer available.
Getting back into it after a nice mini vacation. Time to ramp up and get busy.
Enjoy my 7-year hand-curated collection of free online tools for web dev and design.
Weapons required to rule the world: the weather, common cold, plenty of idiots.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.