Question

I’m displayng emails in a quite narrow column with some other data. In most cases emails fit into the column width but sometimes if an email is long it doesn’r fit and doesn’t look nice.
Is there a way (may be jquery method) or something like this to split email (to make it look like this):

this_is_a_long_email
@some_domain.net

I probably can write some javascript for it but don’t want to invent a bicicle if it already exists (I tried to search but didn’t find anything).

Thanks

Answer 1

@thirtydot preferable to wrap at the @ , if there is an easy way to
wrap it to fit some width it might also work

Making it just wrap is really easy. Add word-wrap: break-word to the containing element.

To make it prefer to wrap at @, you’ll also need to insert a ​ (Zero-width space) before the @, ideally using your server-side language.

<span style="word-wrap: break-word">this_is_a_long_email&#8203;@some_domain.net</span>