This really only seems to work if you know the exact pixel width of the text in question. This would happen if you don't know the font being rendered or actual text in advance, which are both common occurrences in web development.
Nah, you just don't need to know the exact pixel width.
For this example, you just need to know that the full sentence is likely to break some place on a large screen, and that the half-sentences are likely to fit without breaking on certain size screens.
Maybe you need the boundaries of likely maximum and minimum pixel widths, you certainly don't need to know the exact pixel width.
Css has font fall-backs for a reason, and if you ever use them, that means you don't know which font is actually being rendered. Which is not to mention platform differences for rendering even the same fonts.
And if any part of the text is variable, which is pretty much the basis for web apps, then you have another problem.
It would be pretty great if there was something like <wbr> that you could use for this scenario.
