¿Cómo hacer un salto de línea desde CSS, sin usar <br />?

¿ Cómo lograr el mismo resultado sin <br>?

<p>hello <br> How are you </p>

producción:

Hola
Cómo estás

Apr 24 '10 14:04 Jitendra Vyas

Imposible con la misma estructura HTML, debes tener algo para distinguir entre Helloy How are you.

Sugiero usar spans que luego mostrarás como bloques (como en <div>realidad).

p span {
  display: block;
}

<p><span>hello</span><span>How are you</span></p>

Apr 24 '2010 07:04 Vincent Robert

Úselo <br/>normalmente, pero escóndalo condisplay: none

Yo esperaría que la mayoría de las personas que encuentran esta pregunta busquen utilizar un diseño responsivo para decidir si aparece o no un salto de línea en un lugar específico.

Si bien no es inmediatamente obvio, puedes aplicarlo display:nonea <br/>para ocultarlo.

br { display: none; }

Esto significa que puede utilizar consultas de medios tal como lo haría con cualquier otro CSS.

<div>
  The quick brown fox<br />
  jumps over the lazy dog
</div>

@media screen and (min-width: 20em) {
  br {
    /* hide the BR tag for wider screens (i.e. no line break) */
    display: none; 
  }
}

Esto puede resultar útil si necesita forzar un salto de línea en un lugar diferente según el ancho de la pantalla. Y, por supuesto, también puedes utilizarlo  si quieres evitar siempre que se produzca un salto de línea en un lugar específico.

ejemplo de jsfiddle

May 11 '2014 21:05 Simon_Weaver

Hay varias opciones para definir el manejo de espacios en blanco y saltos de línea. Si uno puede poner el contenido, por ejemplo, en una <p>etiqueta, es bastante fácil obtener lo que uno quiera.

Para preservar los saltos de línea pero no los espacios en blanco, utilice pre-line(not pre) como en:

<style>
 p {
     white-space: pre-line; /* collapse WS, preserve LB */
   }
</style>

<p>hello
How are you</p>

Si se desea otro comportamiento, elija entre uno de estos (WS=WhiteSpace, LB=LineBreak):

white-space: normal;   /* collapse WS, wrap as necessary, collapse LB */
white-space: nowrap;   /* collapse WS, no wrapping,       collapse LB */
white-space: pre;      /* preserve WS, no wrapping,       preserve LB */
white-space: pre-wrap; /* preserve WS, wrap as necessary, preserve LB */
white-space: inherit;  /* all as parent element */

FUENTE: Escuelas W3

Feb 05 '2014 12:02 petermeissner