Como controlar los saltos de línea con CSS

Estos días estuve en una maratón conmigo mismo creando el sitio web del EDcamp Lima 2018 y me surgieron muchos retos (que me planteé yo mismo pues yo diseñé el mockup ?) y uno de ellos fue controlar los saltos de línea con css, pues mi mockup era así:

Y en móvil necesitaba que los horarios de las charlas se muestren en una sola línea.

Hice lo que haría todo mundo, incluí una etiqueta <br> entre la hora de inicio y final.

<p class="talk__hour">
    3:55pm <br> 4:20pm
</p>

Funciona, pero ¿cómo hago para que en móvil el salto de línea desaparezca y el horario de inicio y final se pongan uno al lado del otro? La solución rápida, pero muy fea, es encerrar los horarios en etiquetas y luego utilizar el css de toda la vida.

<p class="talk__hour">
    <span class="talk__hour-start">3:55pm</span>
    <span class="talk__hour-end">4:20pm</span>
</p>

@media screen and (min-width: 1024px) {
    .talk__hour-start, 
    .talk__hour-end {
        display: block
    }
}

Repito, funciona, pero es una solución fea. Te cuento como lo resolví al final.

Método 1. Controlar la etiqueta <br> con CSS

Puesto que <br> es una etiqueta más de HTML está en el DOM y podemos manipularla (al menos esa fue mi lógica). En mis pruebas solo me funcionó display: none y display:block mientras que variaciones como display:inline-block u otras no funcionaban. Menos aun usar pseudoelementos para imprimir alguna información en texto (yo necesitaba agregar un guión para separar las dos horas). Pero si solo quieres anular un salto de línea con <br> en cierto tamaño de pantalla esta es tu solución.

@media screen and (max-width: 1024px) {
    .talk__hour br {
        display: none;
    }
}

Método 2. Usar una etiqueta <span> para controlar los saltos de línea

Aunque la etiqueta <span> no está pensada para saltos de línea, con un poco de creatividad resulta más práctica que <br> pues podemos controlarla completamente (incluso agregar pseudoelementos). Mi código HTML quedó así:

<p class="talk__hour">
    3:55pm <span>-</span> 4:20pm
</p>

El código anterior imprime ambos horarios en una sola línea (span es inline por defecto). Además imprime el guion intermedio ? Crear luego un salto de línea es muy sencillo:

@media screen and (min-width: 1024px){
    .talk__hour span {
        font-size: 0;
        display: block;
    }
}

La línea 3 evita que se vea el guion y la línea 4 fuerza el salto de línea. Hermoso.

Podemos ir más allá y hacerlo reutilizable.

@mixin br {
    font-size: 0;
    display: block;
}

$breakpoints: (
  s: 0,
  m: 640,
  l: 1024px,
  xl: 1440px
);

@each $bp, $size in $breakpoints {
  .#{$bp}-br {
    display: inline;
    @media screen and (min-width: map-get($breakpoints,$bp)) {
      @include br;      
    }
  }
}

Y mi código HTML quedaría así:

<p class="talk__hour">
    3:55pm <span class="l-br">-</span> 4:20pm
</p>

El código CSS resultante luego de compilar Sass es el siguiente:

.s-br {
  display: inline;
}

@media screen and (min-width: 0) {
  .s-br {
    font-size: 0;
    display: block;
  }
}

.m-br {
  display: inline;
}

@media screen and (min-width: 640) {
  .m-br {
    font-size: 0;
    display: block;
  }
}

.l-br {
  display: inline;
}

@media screen and (min-width: 1024px) {
  .l-br {
    font-size: 0;
    display: block;
  }
}

.xl-br {
  display: inline;
}

@media screen and (min-width: 1440px) {
  .xl-br {
    font-size: 0;
    display: block;
  }
}

¿Qué hay de la etiqueta <wbr>?

La especificación de HTML incluye la etiqueta <wbr> (self closing) que significa 'Oportunidad de salto de línea'. Significa que podemos dividir una palabra realmente larga (por ejemplo una url) indicandole al navegador donde cortarla cuando no entre en su contenedor. Obviamente no funciona para nuestro caso.

Si quieres saber más trucos de Responsive Web Design, tenemos un curso en EDteam: https://ed.team/cursos/rwd

Tambien puedes leer este post en inglés.