Break long number (no space) around an image in html

Question

I have tried to break the long number 111111111111111111112222222222222222222222333333333333333333344444444444444444445555555555555555 around an image, but it is not right.

Please check the html below.

<td valign="top" colspan='1' style="width:1120px; word-break:break-all;">
  <img src="file://#step_image" width="140" style="float: right"/>
  111111111111111111112222222222222222222222333333333333333333344444444444444444445555555555555555
</td>

And the result is like this:

Why does it have the space inside?

Answer 1

Very interesting question. Unicode specifies that the break should not happen within a number: http://www.unicode.org/reports/tr14/

And it's discussed more here in a webkit bug report: https://bugs.webkit.org/show_bug.cgi?id=108347#c22

So I think the answer is that CSS explicitly does not support what you want because Unicode says that it shouldn't. I have hit very similar constraints in the past. In that case I had to parse the string to insert a Zero-width space between all characters. That would work for you if you have the ability to modify the number string like that.

When you set word-wrap:break-word and add the zero width spaces you get this:

(Maybe someday they'll add word-wrap: break-ALL-i-am-serious!, but I wouldn't hold my breath for it.)