How to Break Long Words with CSS

CSSPosted on

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!

Looking for web dev job?
You can check them on Jooble.

To see and write comments, you must allow the related (Disqus) cookies. For more information, please visit our privacy policy page.

Similar Posts

More content in CSS category