How do I neatly word wrap an Email address in HTML

Question

I am displaying Email addresses on an HTML page (It is internal so no need to obfuscate)

Long Email addresses are wrapping but they do not look nice

donaldduck@exampl
e.com

It would be much neater if the line break was at the "@" character

donaldduck
@example.com

The best I have achieved is by adding a space before the @, but this is not perfect on the emails that do not wrap

donaldduck @example.com

Is there a way to say "break at the @ character if necessary"?

You can use the `` (Word Break Oppertunity) tag in front of the `@` You need a script to auto insert it in front of every @ if you don't want to hardcode it. — tacoshy, Feb 03 '22 at 12:36
Does this answer your question? [Dynamically add tag before punctuation](https://stackoverflow.com/questions/31819939/dynamically-add-wbr-tag-before-punctuation) — tacoshy, Feb 03 '22 at 12:38
Thank you - I have learnt a new HTML element today. It worked. — MortimerCat, Feb 03 '22 at 12:42
BTW, the other answer assumes the reader knows they want a - I needed to know there was a in the first place. — MortimerCat, Feb 03 '22 at 12:49

score 3 · Accepted Answer · answered Feb 03 '22 at 12:54

3

Do like this:

<p>donaldduck<wbr>@example.com</p>

see this:

<!DOCTYPE html>
<html>
<body>

<p>donaldduck<wbr>@example.com</p>

</body>
</html>

answered Feb 03 '22 at 12:54

VAIBHAV NIRMAL

1 Answers1