html - 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.