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:
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.
![DataCamp DataCamp](https://assets.bitdegree.org/online-learning-platforms/storage/media/datacamp-logo-5f96bfc70113e.o.png)
- 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
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
![Udacity Udacity](https://assets.bitdegree.org/online-learning-platforms/storage/media/udacity-review-logo-small.o.png)
- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid Certificates of completion
![Udemy Udemy](https://assets.bitdegree.org/online-learning-platforms/storage/media/udemy-logo-small.o.png)
- Easy to navigate
- No technical issues
- Seems to care about its users
- Huge variety of courses
- 30-day refund policy
- Free certificates of completion
CSS word-wrap syntax
There are two possible values to define for CSS word wrap:
Value | Syntax | Explanation |
---|---|---|
normal |
word-wrap: normal; |
The default value. The lines can only be broken at allowed break points (e.g., spaces) |
break‑word |
word-wrap: break-word |
Usually unbreakable words can be broken if there are no break points |
Note: since the CSS Text Level 3 specification,
word-wrap
was renamed asoverflow‑wrap
.
Browser support
![Browser image](https://www.bitdegree.org/learn/assets/browsers/chrome-logo.jpg)
Chrome
![Browser image](https://www.bitdegree.org/learn/assets/browsers/edge-logo.jpg)
Edge
![Browser image](https://www.bitdegree.org/learn/assets/browsers/firefox-logo.jpg)
Firefox
![Browser image](https://www.bitdegree.org/learn/assets/browsers/ie-logo.jpg)
IE
![Browser image](https://www.bitdegree.org/learn/assets/browsers/opera-logo.jpg)
Opera
![Browser image](https://www.bitdegree.org/learn/assets/browsers/safari-logo.jpg)
Safari
Mobile browser support
![Browser image](https://www.bitdegree.org/learn/assets/browsers/chrome-logo.jpg)
Chrome
![Browser image](https://www.bitdegree.org/learn/assets/browsers/firefox-logo.jpg)
Firefox
![Browser image](https://www.bitdegree.org/learn/assets/browsers/opera-logo.jpg)
Opera
![Browser image](https://www.bitdegree.org/learn/assets/browsers/safari-logo.jpg)