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

Question

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 1

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)

Answer 2

You can use word-wrap : break-word; like so:
div {
width : 50px;
border : 1px solid #000;
word-wrap : break-word;
}
<div>http://www.aaa.com/bbb/ccc/ddd/eee/fff/ggg</div>
I tested this in: I.E. 6/7/8, Firefox 7, Opera 11, Safari 5, Chrome 15
Here is a jsfiddle: https://jsfiddle.net/p4SxG/

Answer 3

If you don’t really care where the breaks happen, the simplest method is to add the style overflow-wrap: break-word;. This will allow long words to break without affecting the breaking of other words.
But if you want to break at specific characters, such as the slash character, you can’t do that with CSS, you have to do it in HTML. If you have access to the HTML code you can choose any of these solutions:
<wbr> word break opportunity tag
​ zero width space
&ZeroWidthSpace; zero width space
But you don’t always have access to the HTML code. Some web applications won’t allow you to enter code into certain fields; for example, WordPress will filter out any code you enter into a post title. In these situations you may be able to insert a zero-width-space character directly. One way to do this is to use Character Viewer (Mac) or Character Map (Windows), although of course they are a bit tricky to use when it comes to spaces because spaces are invisible. In the case of Character Viewer, when you search for arrow, lots of matches appear, but when you search for zero width space, it appears that no characters were found. But if you click where the blue square is in the second image below, you’ll discover that the character was found, it’s just invisible.
A snippet to demonstrate that these various methods all work:
h1 {
width: 15rem;
border: 1px solid black;
}
.b {
overflow-wrap: break-word;
}
A title which is too long
<h1>Seminars/Workshops</h1>
Breaking with CSS
<h1 class="b">Seminars/Workshops</h1>
Breaking with HTML: code-based solutions
<h1>Seminars<wbr>/<wbr>Workshops</h1>
<h1>Seminars​/​Workshops</h1>
<h1>Seminars&ZeroWidthSpace;/&ZeroWidthSpace;Workshops</h1>
Breaking with HTML: character-based solution
<h1>Seminars​/​Workshops</h1>