<h1> with inline <span>

HTML & CSS
1

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

2

Hi,

Did you mean something like this:


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

<body>
<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>
</body>
</html>
3

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

4

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!