Wrap text in td without breaking the word

Question

I have an issue in word wrapping in CSS. I have a td where I have defined width as 300px. I have a url inside the td like

http://www.abc.com/testing/testdata/testurl/test/testing.html

When I use word-wrap: break-word, the text is wrapping as

http://www.abc.com/testing/testdata/tes
turl/test/testing.html

But I do want the word to break. Like /tes in one line and turl in another line. I want it as,

 http://www.abc.com/testing/testdata/testurl/
 test/testing.html

Kindly help. Any help is appreciated. Thanks.

Updated:

I also have probability of getting text other than URL. Means I can't relay on '/' in the data. I can use javascript not jquery.

Answer 1

I can't think of a CSS-only solution. But using JavaScript you could add the word break opportunity tag <wbr>. This tells the browser - except for Internet Explorer - where it can insert breaks:

JavaScript (using jQuery)

$('#element').html( $('#element').html().replace(/\//g, '/<wbr>') );

Demo

http://jsfiddle.net/EkfUR/

As of your edit

You edited your question while I was writing the fiddle. You can of course use another character than / used in the expression to be replaced with the <wbr>-tag.

Answer 2

I see nothing in .css to break text part on specific point ( break row after letter 't' for example.

Search for 'word-break'

caniuse word-break

p {
    -ms-word-break: break-all;
    word-break: break-all;

     // Non standard for webkit
     word-break: break-word;

     -webkit-hyphens: auto;
     -moz-hyphens: auto;
     hyphens: auto;
 }

There is a nice topic relevant to your situation : how-to-prevent-long-words-from-breaking-my-div invoking possibility to split long words by inserting soft hyphen (­) with a regular expression.

Answer 3

You can try doing it on javascript.

1) Split the string in "/";

2) Append substrings from start to end, while the resulting line is smaller than the width of the TD;

3) If it's bigger, don't append the last piece, and place it in the next line (as in, put a <br /> before it);

4) Do this until your split array is empty, which means you have your string broken in lines like you want.

Answer 4

ok, maybe this is the worst approach you'll see, but it does the trick... split the string into span and then use an :after whith a white space like this:

span:after{
 content:' ';
    font-size:0;
}

example here: http://jsfiddle.net/pavloschris/b7qeD/