CSS question I don't know how to Google:

I have a string of the form "Stuff and Nonsense". It's in a H1. If the viewport is too small to show it all in one line, naturally, it breaks it on a space, like

"Stuff and
Nonsense".

Yuck. I can use a   to make it instead break

"Stuff
and Nonsense"

which is worse.

What I want is to have a responsive(tm) solution that is contingent, such that if it has to break at all, it then breaks in TWO places:
"Stuff
and
Nonsense".

Is that a thing?

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.