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>

Answer 2

You can change the hyphen character using the hyphenate-character CSS property.

In this case just set it to an empty string

hyphenate-character: '';

And you can now use ­ soft breaks.

.narrow {
  width: 120px;
  hyphenate-character: '';
}

<div class="narrow">
postmaster@&shy;Llanfairpwllgwyngyll.&shy;cymru
</div>

Answer 3

Maybe you can try <wbr> instead of <br>
Unfortunately, this won't work in IE.

Answer 4

word-wrap:break-word is based on the width of the container you want to break the word in. It's not going to break it where you decide to. You are unfortunately out of luck unless you want to reduce the width of the div so that it breaks where you want.

The other solutions, as you've discovered, are inadequate for your needs. Additionally, using a "jQuery hyphenation library" probably won't fix your issue either because it'll just be injecting the characters, line breaks, or so on just as you tried. You end up with the same problem.

I don't mean any offense by this, but maybe it would be good to rethink the design, rather than work around the design? Robin's answer is a decent alternative, though you won't be able to select the email address without javascript.