How to hide a soft hyphen (­) in HTML / CSS

Question

I am trying to word-wrap an email address within a div, where otherwise it would overflow because it's too long for the div's width.

I know this issue has been covered here before (e.g. this question), but read-on, because I cover all the possible solutions mentioned there and elsewhere.

None of the below solutions do exactly what I want:

1. CSS

   "word-wrap: break-word".
   

   Depending on the div's width, this breaks the email address at awkward places. e.g.

   [email protected]

   k

2. Use a Soft Hyphen within the HTML:

   ­
   

   This is really well supported, but renders a visible hyphen on the page, leading user to believe the email address has a hyphen in there:

   info@long-

   emailaddress.co.uk

3. Use a thinspace or zero-width space within the email address:

     (thinspace)
   ​ (zero-width space)
   

   Both of these insert extra characters (bummer if user copy-pastes)

4. Linebreaks...

   <br />
   

   ... are out because, most of the time, the div is large enough to contain the email address on one line.

I guess I'm hoping for some ingenious way of doing this in HTML/CSS, perhaps making use of pseudo elements (e.g. :before / :after), or by using a soft hyphen but somehow hiding it with CSS in some clever way.

My site uses jquery, so I'll resort to that if I must, although I'd rather not include a whole hyphenation library just for this one little problem!

Answers on a postcard please. (Or, ideally here...)

Answer 1

You can clip the text and use a tooltip

   width: 100px;
   overflow: hidden;
   text-overflow: ellipsis;

What I do is on hover show the full text as tooltip or use the title attribute for tooltip.

<p class="email" title="[email protected]">...</p>