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?

I don't think a browser knows what is a word and what isn't. For,all,it,knows,this,could,be,one,long,legitimate,word. If it broke it up into separate pieces, it would be violating standard behaviour. — Jezen Thomas, Sep 25 '12 at 00:07

Michael · Accepted Answer · 2017-10-31T19:31:37.447

24

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.

edited Oct 31 '17 at 19:31

answered Sep 25 '12 at 00:06

Michael

8,446
4
26
36

This does not work on a ..but adding a space to the text after a comma does.... yourstring.replace(/,/g, ', '); – Darren Jul 31 '15 at 00:48
1

After reading your answer and @banzomaikaka 's answer, it appears the direction W3C would prefer to see us go is to use 'soft' hyphen character rather than invisible whitespace.https://developer.mozilla.org/en-US/docs/Web/CSS/hyphens#Suggesting_line_break_opportunities – John Zabroski Feb 10 '17 at 21:20
Just be aware that adding soft hyphen or zero-space may give side-effects when copying the text. Excel and email tools may not recognize that "smith,jim" and "smith,jim" is the same person etc. – FtLie Nov 29 '17 at 13:42

score 4 · Answer 2 · edited May 23 '17 at 11:54

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.

I think that question is slightly different to this one, but it is nonetheless helpful to juxtaposition it with this one. Thank you! — John Zabroski, Feb 10 '17 at 21:16

score 4 · Answer 3 · answered Feb 05 '13 at 08:11

4

here is a fast jQuery version on how to do it.

$('.table-striped td').html($('.table-striped td').html().replace(/,/g , ',&#8203;'));

answered Feb 05 '13 at 08:11

Alireza Balouch

467
4
13

If anyone is trying this on a it does not work..but a real space does. – Darren Jul 31 '15 at 00:47

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

3 Answers3

Linked