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

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:
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.
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).
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.
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.

Answer 2

I wouldn't recommend using the html style attribute. If you use a class, then it's easier to make changes:
Wrap the two words "adipiscing elit." in a span with a class like this:
<span class="unjustify">adipiscing elit.</span>
And then in your CSS:
.unjustify {
word-spacing: 2px; //experiment with differen't values here.
}
Update:
After some testing the above solution doesn't seem to work. ...so I came up with the following (working) solution:
Wrap the space between your two words in a span with a class like this:
adipiscing<span class="unjustify"> </span>elit.
And then in your CSS:
.unjustify {
display: inline-block;
width: 6px;
}

Answer 3

One solution you should look into is to use one of several fixed-width Unicode space characters. See:
https://jkorpela.fi/chars/spaces.html
or
http://en.wikipedia.org/wiki/Space_(punctuation)
Example:
adipiscing elit.
However like Web_Designer's solution these will leave a space at the end of the line, if the line breaks there.