Forcing line breaks

Let’s say you’ve got a design you’re building, where it’s important that a key phrase be on a new line. In this case, it reads better if ‘two free’ starts the line, and we need to be sure that it will go on a new line regardless of the size of the container it’s in. Furthermore, we want this to be optional - this text will appear in multiple elements of different sizes, but the new line should only happen in the banner variant.

Buy one cool design, get two free dirty CSS hacks!

So adding a <br /> before the text won’t work, because we want to be able to reuse the text without the new line.
Text doesn’t normally wrap like that - usually, the second line will be shorter than the first line:

So how do we force a new line to appear in front of an arbitrary element? You might be tempted to do something like:

.banner em:before {
  content: '<br />';
}

but unfortunately that doesn’t work - it just renders the plaintext <br />.