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

Issue

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.

Solution

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/

Answered By - Jasper

Answer Checked By - Terry (PHPFixing Volunteer)