What are the best practices for dealing with desired line breaks in responsive web design?

I design a great deal of simple single page web items for sales or email. I often find I run into issues with headlines and my desired line breaks at different media widths.

For example, I could have a headline such as:

Our New thingamabob is the best thing since sliced bread!

With absolutely no attention to line breaks the line breaks like this:

Our New thingamabob is the best thing since

sliced bread!

At full web size, I'd like to break the line after "the". Creating two lines.

Our New thingamabob is the

best thing since sliced bread!

For a screen with a medium width, I'd break twice:

Our New thingamabob

is the best thing

since sliced bread!

For even narrower screens, I'd break after "new", after "thingamabob", and after "thing". Creating four lines.

Our New

thingamabob

is the best thing

since sliced bread!

I really don't want to use break tags (<br>) because that hard-sets the breaks at all sizes. Up until now I've used media queries and width percentages for the various h1-h5 tags so that the width of the tag forces a break. But this seems "hacky" to me (it is also very temperamental at times based upon the actual text).

What's the best way to control line breaks without hard coding them into the html?