Detect inline/floated element being pushed to new line
<p>I'm currently wondering about the following problem: I have for example a simple header H1 with a SPAN tag inside which I want to style differently by CSS depending on the position of the SPAN element, meaning I need to detect if the span element is in line with the text node content of the H1 tag or is pushed to a new line because it doesn't fit in the line.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;
  This is a header
  &lt;span class="special"&gt;Special content&lt;/span&gt;
&lt;/h1&gt;</code></pre>
</div>
</div>
</p>

<p>Is there anybody out there having a good idea or even a solution to this?</p>