Edit Question - KnowledgeHub

Title Body

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: 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 Use a Soft Hyphen within the HTML: &shy; 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 Use a thinspace or zero-width space within the email address: &thinsp; (thinspace) &#8203; (zero-width space) Both of these insert extra characters (bummer if user copy-pastes) 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...)

Tags (comma-separated) Cancel