Wrapping Long Email Addresses in Small Boxes

How to wrap email addresses to fit in fixed width box

The email addresses are too long and won't wrap as is. You could replace the displayed email address with 'Email' and link it to their address using mailto.

Or you could use word-wrap: break-word or one of the options in this article.

-ms-word-break: break-all; /* Be VERY careful with this, breaks normal words wh_erever */ 
word-break: break-all; /* Non standard for webkit */ 
word-break: break-word; 
-webkit-hyphens: auto; 
-moz-hyphens: auto; 
hyphens: auto;

How to split long email to fit in a column on the page

@thirtydot preferable to wrap at the @ , if there is an easy way to
wrap it to fit some width it might also work

Making it just wrap is really easy. Add word-wrap: break-word to the containing element.

To make it prefer to wrap at @, you'll also need to insert a ​ (Zero-width space) before the @, ideally using your server-side language.

<span style="word-wrap: break-word">this_is_a_long_email​@some_domain.net</span>

HTML email in outlook: Wrap text

Wrapping does work, just take the px off of your width attributes. Outlook's really picky.

wordwrap a very long string

This question has been asked here before:

• Who has solved the long-word-breaks-my-div problem? (hint: not stackoverflow)
• word wrap in css / js
• CSS: how can I force a long string (without any blank) to be wrapped in XUL and/or HTML
• CSS overflow with long URL

Long story short:

As far as CSS solutions go you have: overflow: scroll; to force the element to show scrollbars and overflow:hidden; to just cut off any extra text. There is text-overflow:ellipsis; and word-wrap: break-word; but they are IE only (break-word is in the CSS3 draft, however, so it will be the solution to this 5 years from now).

Bottom line is that if it is very important for you to stop this from happening with wrapping the text over to the next line the only reasonable solution is to inject ­ (soft hyphen), <wbr> (word break tag), or ​ (zero-width space, same effect as ­ minus hyphen) in your string server side. If you don't mind Javascript, however, there is the hyphenator which seems to be pretty solid.

Is there a way to direct browsers to insert (optional) line-breaks at certain characters?

You do this with a strategically placed <wbr> element:

really.really.long@<wbr>email.address

It behaves identically to <br>, except that a line break will only be inserted when the email address cannot fit on one line. Like <br>, said line break is completely cosmetic (i.e. does not result in a non-printable character).

Wrapping long text without white space inside of a div

You can't wrap that text as it's unbroken without any spaces. You need a JavaScript or server side solution which splits the string after a few characters.

EDIT

You need to add this property in CSS.

word-wrap: break-word;

How to deal with long links in HTML-emails

Have you tried the Microsoft proprietary word-break:break-all; ?

<td style=“word-break:break-all;”>

---

This worked best for me (best compatibility across vendors):

<p style="word-break:break-all;">
    <font style="word-break:break-all;">hxxp://really_long_link</font>
</p>

Tested on: MS Office 2007/2010, outlook.com, hotmail.com, gmail.com, yahoo.com (yahoo did not display nicely)

---

While this was edited to include <p>...</p> I would highly discourage the use of paragraph tags in HTML email if spacing is impotant since email clients interpret these differently.

---

Related Topics