Check the code below to learn how to wrap long email address using css. Every now and then I encounter this problem when building a website, long URLs or long email addresses spill over their container (sometimes breaking the whole layout) instead of beautifully wrapping.

How to wrap long email address using css

.long-email-address-css { 
   word-wrap: break-word; 
}

Place this CSS code word-wrap:break-word on any long URLs, long email addresses or any piece of long text for it to wrap nicely.

It’s worth mentioning that for this CSS  to work, the width of the div (or other element) that contains the long email address must be defined.

This code is just a personal quick reminder; for a more in-depth article about How to wrap long email address using CSS, please check CSS-tricks. The article has a far more detailed example, further info, code and other CSS tricks…