What is the best way to break HTML text on slashes (/)?

tl;dr; (edited Apr 2022)

Use <wbr> word-break-opportunity element before each /. See first link in further reading below.

Details (original from 2014)

While the css word-wrap: break-word; does work, its implementation is different across browsers.

If you have control of the content and want exact breakpoints, you can insert

• a <wbr> word break (supported in all major browsers except IE8 CanIUse.com);
• ​ zero-width space (U+200B) - ugly in IE<=6
• ­ soft hyphen - though of course this adds a hyphen when breaking which is not always what is desired.

I have a large corporate user base who still have to use IE8, so when I hit this problem I used the C# someString.Replace("/", "/​") in the server-side code.

Gotcha: If you insert a zero-width space in an email address, when a user copies and pastes into their email client, the space gets copied too and the email will fail with no way for a user to see why (the space is zero width ...)

References

• Stack Overflow
• http://www.quirksmode.org/oddsandends/wbr.html - with examples

Further Reading

• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr#example
• https://developer.mozilla.org/en-US/docs/Web/CSS/word-break
• https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
• https://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/ (March 2012)
• https://css-tricks.com/almanac/properties/w/word-break/ (Sep 2012)
• https://css-tricks.com/almanac/properties/h/hyphenate/ (Sep 2011)

You can use word-wrap : break-word; like so:

<div>http://www.aaa.com/bbb/ccc/ddd/eee/fff/ggg</div>

div {
    width : 50px;
    border : 1px solid #000;
    word-wrap : break-word;
}

I tested this in: I.E. 6/7/8, Firefox 7, Opera 11, Safari 5, Chrome 15

Here is a jsfiddle: http://jsfiddle.net/p4SxG/