Today I’m going to talk about a rarely used but extremely useful CSS property, the word-wrap. You can force long (unbroken) text to wrap in a new line by specifying break-word with the word-wrap property. For example, you can use it to prevent text extending out the box and breaking the layout. This commonly happens when you have a long URL in the sidebar or comment list. Word-wrap is supported in IE 5.5+, Firefox 3.5+, and WebKit browsers such as Chrome and Safari.

CSS: Word-Wrap Property (view demo)

You can specify either normal or break-word value with the word-wrap property. Normal means the text will extend the boundaries of the box. Break-word means the text will wrap to next line.

.break-word {
  word-wrap: break-word;
}

break word

183 Comments

1 7 8 9
  1. Kevin
    Sep 29, 2012 @ 1:56 pm

    Wow, thanks for the tip. You’ve saved me a headache :) Gotta love CSS3.

    Reply

  2. Gopal
    Jan 30, 2013 @ 5:14 am

    It is not working in Chrome. I am writing it like:

    Reply

  3. free chat with Skype girl
    May 24, 2013 @ 4:53 am

    Ӏt’s really very difficult in this active life to listen news on TV, so I just use the web for that purpose, and obtain the newest news.

    Feel free to visit my web site – free chat with Skype girl

    Reply

  4. prakash
    May 24, 2013 @ 7:00 am

    May we put “-” when it breaks a word?
    like
    => thisisalongw-
    ord

    Thank you.

    Reply

  5. DymoLabels
    Jun 1, 2013 @ 3:14 am

    hi sir
    Excellent post i like it
    thanks for sharing
    thanks

    Reply

1 7 8 9

Leave a Reply