How to prevent css auto hyphenation for email addresses

Question

I use CSS hyphenation (hyphens:auto;) for text paragraphs on websites. Sometimes it happens that email addresses are hyphenated resulting in a 'wrong' domain name. Example:

[email protected]

becomes

john.doe@planungs-
team.abc

How would I prevent that behavior? As this is user generated content, there is no way to manually add html elements. I was thinking about parsing texts with JavaScript, adding special tags to email addresses and use hyphens:none; on those tags. But I'm worried about performance.

(I think this is an issue especially with German text, where there are a lot of compound nouns)

Answer 1

There is no way in CSS to refer to parts of text without making them elements (unless they can be referred to as pseudo-elements, like :first-letter, but there are just a few pseudo-elements currently in CSS, and they don’t help here).

So you need to process the content programmatically, either server-side or client-side. Recognizing e-mail addresses is nontrivial, and you might consider handling some other constructs as well (e.g., URLs). For performance reasons, you might do this in client-side JavaScript so that the processing starts only after the document has loaded. Alternatively, if the data is saved on the server in HTML format, you could perform the processing before saving the data (though this increases the amount of data to be sent to browsers).

Answer 2

yea, if it's user generated, probably easiest to process it with a regex, whether client or server side is up to you, here's a simple implementation in JavaScript.

var unprocessed = $('#user-output').html();
processed = unprocessed.replace(/([a-z]+\[-@-\][a-z]+\.[a-z]+)/g,'<span class="email">$1</span>');
$('#user-output').html(processed);

jquery wrap a e-mail address

although this regex may not pick up ALL email addresses

and, this will break email links e.g. <a href="mailto:[email protected]">

Answer 3

Things would get a lot easier if you had email addresses wrapped in a tags. I'm using a wordpress plugin which detects email addresses and transforms them to spam protected email links. After that it's easy to add this in css:

a[href^="mailto:"] {
    -webkit-hyphens: none;
   -moz-hyphens: none;
    hyphens: none;
}