10

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

Community
  • 1
  • 1
hazymat
  • 404
  • 1
  • 6
  • 20

4 Answers4

7

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>
Robin Maben
  • 22,194
  • 16
  • 64
  • 99
  • 1
    Although I hadn't realised it, that's *exactly* what I was looking for. Thanks! – hazymat Aug 21 '12 at 13:46
  • If the overflow is hidden, how is the address rendered by screen readers used by blind people? (The `title` attribute is useless to them.) – Tsundoku Feb 26 '20 at 20:12
4

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

Simon Arnold
  • 15,849
  • 7
  • 67
  • 85
1

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.

Brendan
  • 4,565
  • 1
  • 24
  • 39
  • Agreed. (Although, I think it would be possible in jQuery to use a span with a hyphen / special character that gets hidden using CSS. Either way - horrible idea.) Robin's solution above was perfect for my needs, I probably should have mentioned I don't *care* if users can't copy-paste the email address, the point is that I didn't want them to try, thinking they could, then wonder why the email didn't send. (Every email is an enquiry and every failed attempt at contact is lost business!) So Robin's solution is good because it's a visual indicator that the whole email address is not copyable. – hazymat Aug 21 '12 at 13:48
0

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 &shy; soft breaks.

.narrow {
  width: 120px;
  hyphenate-character: '';
}
<div class="narrow">
postmaster@&shy;Llanfairpwllgwyngyll.&shy;cymru
</div>
ivarni
  • 17,658
  • 17
  • 76
  • 92