htmlcssword-wraphyphenationsoft-hyphen

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

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.

    info@longemailaddress.co.u

    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...)

Solution

  • 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="long-email-address@mail.com">...</p>