What is the best way to break HTML text on slashes (/)?
I have an HTML table 360px wide, which works great. The challenge is that sometimes a url appears http://this/is/a/really-really-really-really-really/long/url in the text. This causes the table to expand horizontally and a scroll bar appears on the bottom.
I don't think overflow:hidden will work because half of the text would be hidden.
What is the best way to force breaking the line on slashes (/) and dashes (-) in CSS (hopefully)?
It should work with IE7+, Chrome, Firefox and Safari.
Working in Rails 3 and jQuery.
Answer
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://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)
- https://developer.mozilla.org/en-US/docs/Web/CSS/word-break
- https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap