Have you ever wondered if there’s a way to control where and how the words break in your HTML? Like if for some inexplicable reason, the text doesn’t break exactly where you want it to due to the the width restrictions of the parent element? If this is the case, you should try using CSS’s word-break property to exercise total control over your word breaks.
The word-break property takes a few different values. Normal is the default value, and it will break words according to their usual rules. The break-all value indicates that the words will break anywhere, anytime. This means that the text will exactly fill up the space of its container and break in the middle of a word if necessary. It’s great for saving space but not always so great for reading or user experience. If you don’t mind breaking a word between characters, it could be a good way to make your lines of text look more uniform.
The keep-all value indicates that the word break cannot occur between two letters, meaning there must be a space where the word break happens. This keeps all of the words together. The other values that the property takes are initial and inherit, which work pretty much the same way as they do in all other CSS properties. To see the property in action, check out the example below:
p{
word-break: break-all;
}