How to Break Long Words with CSS

A more common use case to break our “unbreakable” text automatically in our HTML code than we think. If we develop a WordPress theme with a test content we get examples to that how can a long URL or text break our layout.

By default, it is a good practice to protect our body copy from this mistake, but we can also apply this technique to the links if we want.

For modern browsers, you only need the word-break property. Breaking long text in a cross-browser way is not the easiest, but we can achieve with the following snippet:

.break_long_text {
    word-break: break-all;
    word-break: break-word;
    hyphens: auto;
}
Note: you must use a prefixer for the best support!
Need a web developer? Maybe we can help, get in touch!