Why doesn't break word work on a long string with commas?

Question

I have a long comma delimited string and I'm trying to use the css style word-wrap:break word but it doesn't seem to work on a string without spaces. Is this expected?

My table looks like this:

<table class="table table-striped" style="margin-top:20px;background-color:#f2f2f2;">
  <tbody>
    <tr>
      <td width="150px" valign="top" style="white-space:nowrap;"><b>Favorite Activities:</b></td>
      <td width="50px" style="word-wrap:break-word;">some,really,really,long,long,string,with,out,any,spaces,just,a,comma,delimited,list</td>
    </tr>
  </tbody>
</table>

Are there any work arounds for this?

Answer 1

word-wrap:break-word; is still experimental, so different browsers might support it or not.

If you have can, insert a zero-width space after the commas. It's U+200B in Unicode, or ​ in HTML. The browser will break the string up at the zero-width space as it needs to. You can probably do that in whatever code is producing the HTML, or write some javascript to automatically insert the character.

See also Wikipedia.

Answer 2

I plused one Michael's answer for his workaround.

However, I've tested the word-wrap property on a few browsers (recent versions of safari, ff, chrome) and it does seem to be stable already (I've just read that it works too on the latest IE versions). What's seems to disturb the thing in your example Paul, is using it inside a table-cell (and anything with display: table-cell). In a div (with display: block), for example, it works perfectly fine.

Take a look at this fiddle. Mess around with it and you'll realize the same thing: http://jsfiddle.net/joplomacedo/DQmJB/

Edit:
I've just found this has been already answered on a fairly popular question here on this site. The problem does come from it being used inside a table. The workaround suggested there is to set the table-layout to fixed and giving the table element a specific width: http://jsfiddle.net/joplomacedo/DQmJB/3/

If you're ok with adding a width to your table, then this might be a good way to do it.