salida:

Hola
Cómo estás

código:

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

¿Cómo lograr la misma salida sin <br>?

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

Sugiero usar spans que luego se mostrarán como bloques (al igual que en <div>realidad).

p span {
  display: block;
}

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

Puede usar white-space: pre;para hacer que los elementos actúen como <pre>, lo que conserva las nuevas líneas. Ejemplo:

p {
  white-space: pre;
}

<p>hello 
How are you</p>

Tenga en cuenta para IE que esto solo funciona en IE8 +.

Úselo <br/>normalmente, pero escóndelo display: nonecuando no lo desee.

Esperaría que la mayoría de las personas que encuentran esta pregunta quieran usar css / diseño receptivo para decidir si aparece o no un salto de línea en un lugar específico. (y no tengo nada personal en contra <br/>)

Si bien no es obvio de inmediato, puede aplicarlo display:nonea una <br/>etiqueta para ocultarla, lo que permite el uso de consultas de medios en conjunto con etiquetas BR semánticas.

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

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

Esto es útil en el diseño receptivo donde necesita forzar el texto en dos líneas en un salto exacto.

http://jsfiddle.net/nNbD3/1/

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

Para preservar saltos de línea pero no espacios en blanco, use pre-line(no 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 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

El comando "\ a" en CSS genera un retorno de carro. Esto es CSS, no HTML, por lo que estará más cerca de lo que desea: sin marcado adicional .

En una cita en bloque, el siguiente ejemplo muestra el título y el enlace de origen y separa los dos con un retorno de carro ( "\a"):

blockquote[title][cite]:after {
    content:attr(title)"\a"attr(cite)
}

En el CSS usa el código

p {
    white-space: pre-line;
}

Con este código css cada entrada dentro de la etiqueta P será una línea de corte en el html.

Sobre la base de lo que se ha dicho antes, esta es una solución CSS pura que funciona.

<style>
  span {
    display: inline;
  }
  span:before {
    content: "\a ";
    white-space: pre;
  }
</style>
<p>
  First line of text. <span>Next line.</span>
</p>

<pre> <---------------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</pre> <--------------------------------------

O

<div style="white-space:pre">  <-----------------------------------
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</div>                         <-----------------------------------

fuente: https://stackoverflow.com/a/36191199/2377343

Para hacer que un elemento tenga un salto de línea después, asígnelo:

display:block;

Los elementos no flotantes después de un elemento de nivel de bloque aparecerán en la siguiente línea. Muchos elementos, como <p> y <div> ya son elementos de nivel de bloque, por lo que puede usarlos.

Pero si bien es bueno saberlo, esto realmente depende más del contexto de su contenido. En su ejemplo, no querría usar CSS para forzar un salto de línea. <br /> es apropiado porque semánticamente la etiqueta p es la más apropiada para el texto que está mostrando. Más marcado solo para colgar CSS es innecesario. Técnicamente no es exactamente un párrafo, pero no hay una etiqueta <greeting>, así que usa lo que tienes. Describir bien su contenido con HTMl es mucho más importante: después de eso , descubra cómo hacer que se vea bonito.

Aquí hay una mala solución a una mala pregunta, pero que literalmente cumple con el resumen:

p {
    width : 12ex;
}

p:before {
    content: ".";
    float: right;
    padding-left: 6ex;
    visibility: hidden;
}

Para una lista de enlaces

Las otras respuestas proporcionan algunas buenas formas de agregar saltos de línea, dependiendo de la situación. Pero debe tenerse en cuenta que el :afterselector es una de las mejores formas de hacer esto para el control CSS sobre las listas de enlaces (y cosas similares), por las razones que se detallan a continuación.

Aquí hay un ejemplo, suponiendo una tabla de contenido:

<style type="text/css">
    .toc a:after{ content: "\a"; white-space: pre; }
</style>

<span class="toc">
    <a href="#a1">Item A1</a> <a href="#a2">Item A2</a>
    <a href="#b1">Item B1</a> <a href="#b2">Item B2</a>
</span>

Y aquí está la técnica de Simon_Weaver, que es más simple y más compatible. No separa tanto el estilo y el contenido, requiere más código y puede haber casos en los que desee agregar interrupciones después del hecho. Sin embargo, sigue siendo una gran solución, especialmente para IE más antiguos.

<style type="text/css">
    .toc br{ display: none; } /* comment out for horizontal links */
</style>

<span class="toc">
    <a href="#a1">Item A1</a><br/> <a href="#a2">Item A2</a><br/>
    <a href="#b1">Item B1</a><br/> <a href="#b2">Item B2</a><br/>
</span>

Tenga en cuenta las ventajas de las soluciones anteriores:

• No importa el espacio en blanco en el HTML, el resultado es el mismo (vs. pre )
• No se agrega relleno adicional a los elementos (ver NickG's display:block comentarios )
• Puede cambiar fácilmente entre listas de enlaces horizontales y verticales con algunos CSS compartidos sin tener que acceder a cada archivo HTML para un cambio de estilo
• No floatoclear estilos que afectan el contenido circundante
• El estilo es independiente del contenido (vs. <br/>opre con saltos codificados)
• Esto también puede funcionar para enlaces sueltos usando a.toc:after y<a class="toc">
• Puede agregar múltiples saltos e incluso texto de prefijo / sufijo

Quizás alguien tenga el mismo problema que yo:

Estaba en un elemento con display: flexlo que tuve que usar flex-direction: column.

Establecer una bretiqueta paradisplay: none es útil, pero luego puede terminar con WordsRunTogether. Me pareció más útil reemplazarlo con un carácter de espacio, así:

HTML:

<h1>
    Breaking<br />News:<br />BR<br />Considered<br />Harmful!
</h1>

CSS:

@media (min-device-width: 1281px){
    h1 br {content: ' ';}
    h1 br:after {content: ' ';}
}

Qué tal si<pre> etiqueta?

fuente: http://www.w3schools.com/tags/tag_pre.asp

Puede agregar mucho relleno y forzar el texto para que se divida en una nueva línea, por ejemplo

p{
    padding-right: 50%;
}

Me funcionó bien en una situación con un diseño receptivo, donde solo dentro de un cierto rango de ancho era necesario que el texto se dividiera.

Me gustan las soluciones muy simples, aquí está la más.

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

y css

p {
 display: flex;
 flex-direction: column;
}

Utilice overflow-wrap: break-word; me gusta :

.yourelement{
overflow-wrap: break-word;
}

Debes declarar el contenido dentro de <span class="class_name"></span> . Después de eso, la línea se romperá.

\A significa carácter de avance de línea.

.class_name::after {
  content: "\A";
  white-space: pre;
}

Las respuestas de Vincent Robert y Joey Adams son válidas. Sin embargo, si no desea cambiar el marcado, puede insertar un <br />usando javascript.

No hay forma de hacerlo en CSS sin cambiar el marcado.

En mi caso, necesitaba un botón de entrada para tener un salto de línea antes.
Apliqué el siguiente estilo al botón y funcionó:

clear:both;

En caso de que esto ayude a alguien ...

Podrías hacer esto:

<p>This is an <a class="on-new-line">inline link</a>?</p>

Con este css:

a.on-new-line:before { 
  content: ' '; 
  font-size:0; 
  display:block;
  line-height:0;
}

Usar en  lugar de espacios evitará un descanso.

<span>I&nbsp;DONT&nbsp;WANT&nbsp;TO&nbsp;BREAK&nbsp;THIS&nbsp;LINE&nbsp;UP, but this text can be on any line.</span>

Esto funciona en Chrome:

p::after {
    content: "-";
    color: transparent;
    display: block;
}

Supongo que no querías usar un punto de interrupción porque siempre romperá la línea. ¿Es eso correcto? Si es así, ¿qué tal si agrega un punto <br />de interrupción en su texto, luego le da una clase como <br class="hidebreak"/>luego usando una consulta de medios justo encima del tamaño que desea que rompa para ocultar el<br /> para que se rompa en un ancho específico pero permanezca en línea por encima de ese ancho.

HTML:

<p>
The below line breaks at 766px.
</p>

<p>
 This is the line of text<br class="hidebreak"> I want to break.
</p>

CSS:

@media (min-width: 767px) {
  br.hidebreak {display:none;}
}

https://jsfiddle.net/517Design/o71yw5vd/

El código puede ser

<div class="text-class"><span>hello</span><span>How are you</span></div>

CSS sería

.text-class {
     display: flex;
     justify-content: flex-start;
     flex-direction: column;
     align-items: center;
 }

No lo hagas Si desea un salto de línea difícil, use uno.