title: How to hide a soft hyphen (&shy;) in HTML / CSS
body: <p>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.</p>
  
  <p><em>I know this issue has been covered here before (e.g. <a href="https://stackoverflow.com/questions/5038920/html-soft-hypen-shy-without-dash">this question</a>), but read-on, because I cover all the possible solutions mentioned there and elsewhere.</em></p>
  
  <p>None of the below solutions do exactly what I want:</p>
  
  <ol>
  <li><p><strong>CSS</strong></p>
  
  <pre><code>"word-wrap: break-word".
  </code></pre>
  
  <p>Depending on the div's width, this breaks the email address at awkward places. e.g.</p>
  
  <blockquote>
    <p>info@longemailaddress.co.u</p>
    
    <p>k</p>
  </blockquote></li>
  <li><p>Use a <strong>Soft Hyphen</strong> within the HTML:</p>
  
  <pre><code>&amp;shy;
  </code></pre>
  
  <p>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:</p>
  
  <blockquote>
    <p>info@long-</p>
    
    <p>emailaddress.co.uk</p>
  </blockquote></li>
  <li><p>Use a <strong>thinspace</strong> or <strong>zero-width space</strong> within the email address:</p>
  
  <pre><code>&amp;thinsp; (thinspace)
  &amp;#8203; (zero-width space)
  </code></pre>
  
  <p>Both of these insert extra characters (bummer if user copy-pastes)</p></li>
  <li><p><strong>Linebreaks</strong>...</p>
  
  <pre><code>&lt;br /&gt;
  </code></pre>
  
  <p>... are out because, most of the time, the div is large enough to contain the email address on one line.</p></li>
  </ol>
  
  <p>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.</p>
  
  <p>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!</p>
  
  <p><em>Answers on a postcard please. (Or, ideally here...)</em></p>