@@Rolf B

Der verwaiste Bindestrich stört.

Stimmt. Du solltest wissen, dass da kein Bindestrich hingehört, sondern ein Gedankenstrich – ein Halbgeviertstrich (so wie hier).

Keine Ahnung, ob es CSS Tricks gibt, diesen nur erscheinen zu lassen wenn alles auf eine Zeile steht.

Den Gedankenstrich(!) nicht zwischen die spans tun, sondern mit ins erste:

<p>
  <span>Keep the future alive&nbsp;&ndash;</span>
  <span>Deep Space 9, Season 5, Episode 6</span>
</p>

Außer mit einer Container-Abfrage auf den header, vielleicht.

BTW, anstatt header scheint mir hier hgroup angebracht.

Kwakoni Yiquan