Simulating display: run-in

The CSS declaration display: run-in, despite having been part of the specification since 1998, is still very poorly supported as of 2022. This is an attempt at simulating the intended behavior.

Set both a heading and the following paragraph to display: inline – this will make them run together. Give the heading some distinctive typographic treatment (here I’m using boldface). Then, to prevent the heading-and-paragraph unit from running together with its adjacent elements, use empty generated content set to display: block before the heading and after the paragraph, and restore the desired top and bottom margins. This should work correctly in any browser that supports generated content.

HTML

<p>Lorem ipsum, dolor sit amet, consectetur adipiscing elit, sed diam nonummy eiusmod tempor incidunt ut labore et dolore magna aliquam erat voluptat.</p>

<h3>A run-in subheading</h3>

<p>Ut enim ad minim veniam, quis nostrud exercitation ullamcorpor suscipit laboris nisi ut aliquip ex ea commodo consequat.</p>

<p>Duis autem vel eum irure dolor in henderit in voluptate velit esse molestaie consequat, vel illum dolore eu fugiat nulla pariatur, at vero eros accumsan qui blandit praesent luptatum delenit augue.</p>

CSS

h3 {
	display: inline;
	font: inherit;
	font-weight: bold;
}
h3::after {
	content: ". ";
}
h3 + p {
	display: inline;
}
h3::before, h3 + p::after {
	content: "";
	display: block;
	margin: 1.5em 0; /* Match the margins of an ordinary <p> element. */
}

If the element following the run-in heading is something other than a <p>, be sure to adjust the CSS accordingly.

Result

A caveat: this example is deliberately quite simple. The paragraphs have no left and right margins, text-indent, borders or other properties that display: inline would interfere with. This method may well fail in more complex layout situations. If you manage to adapt or expand on this, I’d be glad to hear about it!