Non Breaking Space vs Zero Width Space in HTML

Text in table cells is a fickle beast, especially when filled with long numbers. True text will typically allow for sane breaks even in a narrow column. However, not much can be done with numeric data or other data that cannot be arbitrarily broken when a column changes sizes.

For example, consider the following number:

1,234,567,890.34

How would you break such a number in a column that supports only a four-character width? It's a tough decision, but probably one you would prefer to make yourself rather than leave it up to HTML and CSS.

Tip:  When deciding where to break numbers, keep in mind that the best places to break are around punctuation (commas, periods) or currency symbols. Doing so will preserve as much readability of your numbers as possible.

You have two essential tools to use when controlling line breaks, the nonbreaking space and the zero-width space.

Non Breaking Space

The nonbreaking space is best known by its HTML entity code,  . This character looks and acts like a space, except in that it doesn't allow the browser to break the line at this space. Although it is commonly used to space-fill elements, the nonbreaking space does have its textual uses. For example, you typically would not want the following line broken at the embedded spaces:

12344 Mediterranean Circle

To prevent the line from breaking, you would replace the spaces with nonbreaking space entities, similar to the following:

12344 Mediterranean Circle

Zero Width Space

The zero-width space is somewhat opposite to the nonbreaking space — it is not visible but allows the browser to break at the character. The zero-width space can be inserted by using its HTML entity code, ​

Returning to our earlier example number, we can choose where we'd likeit to be broken if it must break (the original number is on the first line, the doctored number on the second):

1,234,567,890.34
1, ​234, ​567, ​890.​34

Now, if the number needs to be broken, it will be broken after a comma or after the decimal point.