CSS word-wrap property allows you to break the long word into the next line. Words within a paragraph automatically break to the next lines when necessary.

But if you have a word with 50 characters/letters, that may cause a horizontal scrollbar. And it may go over/outside of the body.

To solve this kind of problem, the word-wrap property comes into play. See the following example:

css word wrap example
CSS word-wrap example

In the above example- both contain the same HTML:

  <p>This is an example of long word pneumonoultramicroscopicsilicovolcanoconiosis</p>

And the following CSS solved the issue:

p{word-wrap: break-word;}

CSS White Space

You can do the opposite with ‘white-space‘ CSS. For example- if you don’t want to create a line break in an anchor tag. You can write the following CSS to prevent the line break:

a{white-space: nowrap;}

This code will prevent the link from breaking in the next line. You can also apply it to other elements as well. This ‘white-space’ property accepts a few other types of value e.g. pre-wrap, pre-line, etc.

Learn & practice CSS with real-world examples
Learn basic CSS from the ground up.
Build real projects in HTML CSS.
Make your hands dirty

Build HTML CSS projects

About us templatePreview
Team pagePreview
Testimonial pagePreview
Testimonial sliderPreview
Contact pagePreview
Multipage websitePreview
Portfolio websitePreview
Animated portfolioPreview
Computer science portfolioPreview
Navigation bar (without JS)N/A
Create a hamburger menuPreview
Create a navigation menu in two waysN/A
Footer templatesPreview
Hero bannerPreview
Background sliderPreview
Card templates (HTML, CSS)Preview
Animated cardsPreview
Three-column layout templatePreview
Two column layoutPreview
Breadcrumb navigationN/A
Progress bar templatePreview
Thank you pagePreview
Resume templatePreview
Coming soon templatePreview
Landing page templatePreview
Roofing website templatePreview