html - etiquetas - title css

¿Cómo evito un salto de página inmediatamente después de un encabezado?

Question

Tengo un documento HTML 4.01 / CSS 2.1 que incluye un encabezado H3 seguido de un bloque de párrafo corto (una línea) y luego una lista desordenada con varios elementos:

<h3>Heading!</h3>

<p>Some things:</p>

<ul>
  <li>Thing one</li>
  <li>Thing B</li>
  <li>Thing 4</li>
</ul>

Mi problema es que cuando wkhtmltopdf el documento (o lo represento como un PDF usando wkhtmltopdf ), a veces ocurre un salto de página justo después del encabezado, antes del párrafo, que parece bastante tonto.

¿Hay una manera de estipular que los saltos de página deben evitarse inmediatamente después de un encabezado? (No soy reacio a las soluciones HTML5 / CSS3, si eso simplifica las cosas significativamente).

Nota: siguiendo las sugerencias, intenté usar la propiedad CSS page-break-after: avoid . Sin embargo, esto realmente no funciona en ningún Mozilla basado en WebKit o Mozilla .

Answer 1

Dado que la propiedad de CSS page-break-after: avoid no funciona en ningún Mozilla basado en WebKit o Mozilla , use el page-break-inside: avoid sobre el encabezado y una cantidad aceptable de texto:

CSS

<style type="text/css">
    .nobreak {
        page-break-inside: avoid;
    }
</style>

HTML

<div class="nobreak">
    <h3>Heading!</h3>

    <p>Some things:</p>

</div>

    <ul>
      <li>Thing one</li>
      <li>Thing B</li>
      <li>Thing 4</li>
    </ul>

Answer 2

Esta es una solución extremadamente hacky, pero funciona para mí:

h1 {
    page-break-inside: avoid;
}
h1::after {
    content: "";
    display: block;
    height: 100px;
    margin-bottom: -100px;
}

Básicamente, creo un elemento invisible que aumenta el tamaño de <h1> sin afectar el contenido posterior. Cuando page-break-inside: avoid se aplica y todo el <h1> (incluido el elemento hacky no puede caber en la página), el navegador se ve obligado a llevar <h1> a la página siguiente.