<h1> with inline <span>

I have a <h1> with a main heading. I have a sub heading (smaller font and different color) which I would like to have in line with the <h1> tag. This works when it’s just a short sub heading. When the sub heading on the other hand is to long the entire sub heading jumbs to the next line. How can I make it so that when the sub heading is to long only the part that doesn’t fit goes to the next line.

Thank you in advance


Did you mean something like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
h1 small, h2.run-in {
h1 small { font-size:70%; }
.run-in { display:inline; }

<h1>This is a main Heading - <small>With some smaller explanatory text about the heading</small></h1>
<h1 class="run-in">This is a Main-Heading -</h1>
<h2  class="run-in">This is a genuine Sub heading but with a run-in style.</h2>

That is indeed what I mean Paul, great. Thank you very much.

Another (easier?) way to do it is to use [noparse] [/noparse] in place of spaces inside the ‘small’ bit that you want to keep together. Although custom and practice means that we usually think of that in terms of forcing a space where there wouldn’t otherwise be one, and preventing white space from collapsing, its original and true meaning is a space between characters that won’t break onto a new line … which is exactly what you need here!