cancelling text-align: justify; for certain parts of text

Question

To prevent wrapping of a part of text, surrounding that part in a <span style="white-space: nowrap;"> can be used.

Given a block of justified text (text-align: justify), how do I cancel justification for a part of the text? I want to keep the whole text justified, but not allow to increase distance between two specific words.

Instead of even spacing in the second line like this:

Lorem ipsum dolor sit amet, consectetur |
adipiscing    elit.     Phasellus    et |
ullamcorperenim sed velit fermentum.    |

I want to keep the words "adipiscing elit" together, like this:

Lorem ipsum dolor sit amet, consectetur |
adipiscing elit.      Phasellus      et |
ullamcorperenim sed velit fermentum.    |

Is this possible?

Answer 1

Options:

1. Use FOUR-PER-EM SPACE U+2005 instead of normal space, e.g. adipiscing elit. There is no guarantee that browsers treat it as non-stretchable space, but that’s what they actually do, and it’s a rather natural thing to do. After all, it is one of the fixed-width spaces. Drawback: typically fails on IE 6 (a small box is shown instead of a space), if the primary font of the text is not Arial Unicode MS or some other especially “rich” font.
2. Wrap the words inside some inline markup (typically span) and set text-justify: none and display: inline-block for it. Drawbacks: does not work old some old browsers, and forces the two words together (due to the latter declaration—and without it, this methods does not work on current browsers).
3. Use NO-BREAK SPACE instead of normal space. This used to work well, though with the drawback to forcing the two words together on the same line. But e.g. current Firefox treats no-break as stretchable, sadly enough.
4. Use a technique like the one in Web_Designer’s updated answer. I would suggest making the width em valued, to make it relate to the font size. The typical width of a space is 0.25em.