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


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.


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

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


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

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

    Thank you.


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

    hi sir
    Excellent post i like it
    thanks for sharing


  5. Stories about technology
    Feb 5, 2019 @ 4:35 am

    When would you ever want to use normal over break-word?


1 7 8 9

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.