CSS Word Wrapping

Making CSS wrap text

If a container contains a word that is too long to fit between the edges, you can use the CSS word-wrap property to allow breaking words and wrapping them in the next line:

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

It may seem similar to word-break, but there is a clear difference: word-wrap is used to break a word that is too long to fit, and word-break breaks the last word in a too long line.

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 50% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

CSS word-wrap syntax

There are two possible values to define for CSS word wrap:

p.learn {
    word-wrap: normal;
}

Note: since the CSS Text Level 3 specification, word-wrap was renamed as overflow‑wrap.

Browser support

Chrome

23+

Edge

12+

Firefox

49+

IE

5.5+

Opera

15+

Safari

6.1+

Mobile browser support

Chrome

25+

Firefox

49+

Opera

14+

Safari

7+