26

I have a box with a width of 118px which contains an email address. I use word-wrap: break-word; to wrap the addresses better. But on a special kind of addresses this makes it worse. 

big.ass.email@addre
ss-
is.extremely.lame.de

Because of word-wrap: break-word; it breaks after "addre" but ceause the rest of the address doesn't fit in one line it breaks again at a "prefered breakpoint" which happens to be the "-". In desired behaviour the second break in the email address would not be after "-" but after "extremely". I fear that's not possible with just CSS. Isn't it?

Here you can see a small example: http://jsfiddle.net/sbg8G/2/

Juuro
  • 1,487
  • 5
  • 16
  • 27
  • This is a [very common question on stackoverflow](http://stackoverflow.com/questions/856307/wordwrap-a-very-long-string) – misterManSam May 21 '14 at 07:40
  • @misterManSam No, it's not. I don't want to simply wrap my text when it reaches the end of a box. I do that already with `word-wrap: break-word;`. I want to "reset" the "preferred breaking points" such as "-, ?, !, &, ..." to wrap the text ONLY when it reaches the end of an box! – Juuro May 21 '14 at 07:46
  • Cehck to this http://jsfiddle.net/sbg8G/13/ – Rohit Azad Malik May 21 '14 at 08:00

4 Answers4

42

Your best bet here would be to use <WBR> tag or &#8203; character to introduce a soft-break wherever you wish. e.g.:

Demo: http://jsfiddle.net/abhitalks/sbg8G/15/

HTML:

...
<a href="big.ass.email@address-is.extremely.lame.de">
    big.ass.email@&#8203;address-is&#8203;.extremely.lame.de
</a>
...

Here, &#8203; is inserted after the "@" and after "-is" to cause a break at those points.

Important: word-wrap and word-break won't help you here.

Reason:

  1. word-break is meant for CJK (Chinese, Japanse, Korean) texts. (Reference). Its main purpose is to prevent word breaks for CJK text. Rest is normal.
  2. word-wrap is used to specify whether or not the browser may break lines within words in order to prevent overflow. That's it. (Reference) The main thing to notice is that "..normally unbreakable words may be broken at arbitrary points.. ". Arbitrary points don't give you much control, do they?

Hard-hyphens help to indicate the break points. You have a hyphen in your email address and that gives a hint to break word there.

Note:

A better alternative would be have CSS3 do it for us. word-wrap and word-break doesn't allow control of break points. hyphens does, but, unfortunately hyphens still "is an experimental technology".

Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens

hyphens should be able to do the trick along with:

hyphenate-limit-lines
hyphenate-limit-zone
hyphenate-character
hyphenate-limit-before

But, this doesn't work currently as it should. Otherwise, a &shy; would have helped you out.

Note 2:

hyphens, would add a "hard hyphen" (-) which would cause unintended results in your case (the email address would change).

Credits: here, here, and here

Abhitalks
  • 27,721
  • 5
  • 58
  • 81
  • 3
    ​ also works perfectly within Wordpress. It gives complete control over where you want a line to break. – edwinbradford Jun 15 '18 at 17:16
  • 1
    Super, the wbr is working fine and looks like a good solution to me. In my case, I have been working with emails and a requirement to soft break at @ or .com. So, wbr works fine for this. Thanks a lot. – whyAto8 Sep 17 '18 at 08:37
  • 1
    This behavior looks like it produces problems for users who expect to be able to copypaste the email address and don't know about the invisible whitespace that's out to get them. – Christian Feb 06 '19 at 11:08
  • 1
    @Christian: Not really. `wbr` is the recommended way to introduce a break opportunity for emails and URLs by [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr), [HTML5 spec](https://www.w3.org/TR/html50/text-level-semantics.html#the-wbr-element), and the [living standard](https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-wbr-element). It behaves *like* a zero-width space, but will not adversely affect copy-paste or click-through scenarios. – Abhitalks Feb 06 '19 at 11:35
  • @Abhitalks : My point is that your demo doesn't use `` nor warns the user of the problems that might arrive with the demo code. – Christian Feb 06 '19 at 11:45
  • @Christian I have clearly mentioned `wbr` in the starting and if you’ve read the specs, you would know that `​` works the same thing. And there are no apparent problems which I should have warned about. Please let me know what exactly is the problem. – Abhitalks Feb 06 '19 at 14:08
  • 1
    @Abhitalks : You provided a demo-link. It's easy to test it and copypaste the content in your demolink. If you copypasted it, you get a zero-width space within the copypasted content. Your get `big.ass.email@​address-is​.extremely.lame.de` which has two zero-space characters in it. You won't get `big.ass.email@address-is.extremely.lame.de` and the user might not notice the difference as the whitespace is invisible and get into problems when his mail program reacts based on the zero space characters. – Christian Feb 06 '19 at 14:20
  • 1
    Thank you so much @Christian. But, that copy-paste won’t adversely affect anything. Try doing it. The email clients will work as intended and URLs will also work as intended. Please do let me know should you have any problem there. – Abhitalks Feb 06 '19 at 14:26
  • Amazing! In react-native you can insert `\u{200B}` into your string – Gerbus Mar 07 '19 at 17:46
  • 1
    Email to an address containing `​` (copy-pasting HTML `mailto:` link) gets delivered as expected in Gmail. – bencergazda May 21 '20 at 07:32
2

Hello I have a similar issue and I solve it with:

  overflow-wrap: break-word;
  word-wrap: break-word;

Also you could check this: Handling Long Words and URLs (Forcing Breaks, Hyphenation, Ellipsis, etc

Daher
  • 1,001
  • 10
  • 10
1

You can try using text-overflow:ellipsis;

overflow:hidden;
text-overflow:ellipsis;

http://jsfiddle.net/sbg8G/8/

Omm
  • 1,615
  • 1
  • 11
  • 11
0

You only need these styles overflow: hidden; overflow-wrap: break-word; and your job is done.

<div style="overflow: hidden; overflow-wrap: break-word;max-width:160px;">
  abcabcabcabcabcabc.woiasdf@mail.com
</div>

The same will work for long text (single word) with no whitespace.

WasiF
  • 26,101
  • 16
  • 120
  • 128