add different styles when text wraps to next line - css

Question

I have a div with a small heading - just two words.
When I resize da browser the text wraps and the last word goes to the next line.
I want to display different styles to the last word only when it goes to the next line. For instance: font-weight:normal instead of being bold.
Is that possible only with css?

Answer 1

You could use the::first-line pseudo element for this.
From MDN:
The ::first-line CSS pseudo-element applies styles to the first line
of a block-level element. Note that the length of the first line
depends on many factors, including the width of the element, the width
of the document, and the font size of the text.
section {
width: 10%;
border: 2px solid tomato;
}
h2 {
font-weight: normal;
}
h2:first-line {
font-weight: bold;
color: green;
}
<section>
<h2>Some heading</h2>
</section>
Codepen demo (resize to see the effect)

Answer 2

Since your content is more dynamic, you may need to use Javascript to accomplish this. An event listener on page resize that checks the height of your heading div and adjusts a span containing the second word should do the trick.
window.onresize = function(){
document.getElementById('last_word').style.font-weight = 'normal';
};
If your page content is fairly static, you could probably get away with using a css media query. I don't know of any way to have css grab the second word in a div, but if you put the second word in a span you could do something like this:
#media (max-width: 700px) {
#header_id>span {
font-weight: normal;
}
}
Of course, replacing the 700px with whatever width you find triggers the content to word wrap.