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:
In the above example- both contain the same HTML:
<div> <p>This is an example of long word pneumonoultramicroscopicsilicovolcanoconiosis</p> </div>
And the following CSS solved the issue:
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:
This code will prevent the link to break in the next line. You can also apply it to other elements as well. And this ‘white-space’ property accepts few other types of value e.g: pre-wrap, pre-line, etc.
Please let me know if you found it helpful.