<h2 style="page-break-after:avoid">Heading</h2>
<p>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text<br>Text</p>

The <h2> should always sit with the text.

I realized I did not actually answer your question, but rather stated that your question was not relevant to this topic. So to answer your question, I do not know of a way to automatically (dynamically) handle that with a CSS-only solution. If the browser has determined that a line break is required that typically means there wasn’t enough room for that last word on the previous line. And if there is no room on the previous line, then what else would you do with that last word? If you think the best solution is to have a minimum number of words per line, then you would have to use javascript to determine that and fix it after the text is rendered, as well as whenever the viewport is resized.

I know this is old, but I think ORyan misunderstood the context in which Christopher was asking his question and my answer is to clarify things for anyone coming after me that sees ORyan’s reply and assumes it will resolve Christopher’s issue. I think Christopher was referring to non-print media, but the article clearly states that it does not affect “screen” media except when used in combination with CSS columns. I believe Christopher was asking outside the context of print media because a single word on a new line at the end of a paragraph (while can look ugly and be frustrating at times) is a different problem than a single word that has a column (or page, in print media) all to itself, which is where the widows property would apply. But to answer your question, Chris’, the issue you asked about is not what this post is about. It is about print media (mostly) and preventing pages/columns from having too little text and the end (orphans) or beginning (widows).

I updated my CodePen example to show what I ended up attempting. I ended up wrapping the heading and the first paragraph with a div and used “break-inside: avoid;” to prevent it from wrapping. If anybody knows a better way, please share.

Example here (may have to resize browser window to see the issue):

What you are talking about is not an orphan. It’s called a widow and there is a property for that as well.

https://css-tricks.com/almanac/properties/w/widows/

There are plug-ins for WordPress to do this, but I don’t like burdening the server for what should be a minor presentational tweak.