2

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.

Raja Asthana
  • 2,080
  • 2
  • 19
  • 35
  • This is not related with Html or CSS :) You will probably need a server side language for it, like PHP. – Alvaro Mar 01 '13 at 13:49
  • Can't we control this in CSS. I think we can.. Kindly correct me if am wrong.. – Raja Asthana Mar 01 '13 at 13:51
  • 1
    CSS won't recognise `/` as distinct from the other characters, so it won't break it there. It will break on whitespace however. You'll need to output this yourself most likely, or use JS. – Aram Kocharyan Mar 01 '13 at 13:51
  • How can we achieve this JS.. Kindly help... – Raja Asthana Mar 01 '13 at 13:53
  • Also question why you want this in the first place. Having a long url in a table isn't very useful unless you plan on copying it out. Otherwise, you'd have it as a link. – Aram Kocharyan Mar 01 '13 at 13:53

4 Answers4

3

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.

insertusernamehere
  • 23,204
  • 9
  • 87
  • 126
0

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.

Community
  • 1
  • 1
Milche Patern
  • 19,632
  • 6
  • 35
  • 52
0

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.

Ivozor
  • 976
  • 8
  • 23
0

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/

xpy
  • 5,481
  • 3
  • 29
  • 48