Web Development Blog

Web Development » CSS, Snippets » Wrapping a long url with CSS

25 Feb, 2009

Wrapping a long url with CSS    

a {
word-wrap: break-word;
}


Works for a long text too:

p {
word-wrap: break-word;
}


Tested in IE6, IE7, Firefox, Safari, Chrome

Found this article useful? Share it with your friends:

Love what you've just read? Subscribe to our newsletter to receive tips, resources and special offers related to web development & design.

Your name:   Your email:  

Other similar posts that you might be interested in:

• Align an image in center and middle using CSS
• Opacity in CSS
• Google Chrome Browser
• If Browsers were Women
• Browser Market Share (Year 2009)
• How to use Google Fonts in your WordPress Theme
• 10 Examples of Basic Input Validation in Javascript

3 Responses to “Wrapping a long url with CSS”

1. max says:

   March 10, 2009 at 11:03 am

   Mmmm… This solution not validate and doesn’t work w many browsers!
   did you try:

   white-space: pre-wrap; /* css-3 */
   white-space: -moz-pre-wrap !important; /* Mozilla */
   white-space: -pre-wrap; /* Opera 4-6 */
   white-space: -o-pre-wrap; /* Opera 7 */
   word-wrap: break-word; /* IE 5.5+ */

   It’s still not css validate but works w many browsers
2. alinur says:

   April 28, 2009 at 8:59 pm

   CSS means Cascading style Sheet. This the language of web page design.
3. Jürgen Jeka says:

   May 25, 2009 at 9:39 pm

   Max,

   word-wrap: break-word;
   works in Gecko 1.9.1/ Firefox 3.5. See
   https://developer.mozilla.org/en/CSS/word-wrap

   BTW, white-space: pre-wrap;
   works since Gecko 1.9/ Firefox 3.0, -moz-pre-wrap is dropped. See
   https://developer.mozilla.org/en/CSS/white-space

   j.j.