produzione:

Ciao
Come stai

codice:

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

Come ottenere lo stesso risultato senza <br>?

Impossibile con la stessa struttura HTML, devi avere qualcosa per distinguere tra Helloe How are you.

Suggerisco di usare spans che verranno quindi visualizzati come blocchi (proprio come in <div>realtà).

p span {
  display: block;
}

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

È possibile utilizzare white-space: pre;per fare in modo che gli elementi si comportino come <pre>, preservando le nuove linee. Esempio:

p {
  white-space: pre;
}

<p>hello 
How are you</p>

Nota per IE che questo funziona solo in IE8 +.

Usalo <br/>normalmente, ma nascondilo display: nonequando non lo vuoi.

Mi aspetterei che la maggior parte delle persone che trovano questa domanda vogliano usare css / responsive design per decidere se un'interruzione di linea appare o meno in un posto specifico. (e non hai nulla di personale contro <br/>)

Anche se non immediatamente ovvio, puoi effettivamente applicare display:noneun <br/>tag per nasconderlo, il che consente l'uso di media query in tandem con tag BR semantici.

 <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)
    }
 }

Ciò è utile nel design reattivo in cui è necessario forzare il testo in due righe in corrispondenza di un'interruzione esatta.

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

Esistono diverse opzioni per definire la gestione di spazi bianchi e interruzioni di riga. Se uno può inserire il contenuto in un <p>tag, ad esempio , è abbastanza facile ottenere ciò che si desidera.

Per preservare le interruzioni di riga ma non gli spazi bianchi usare pre-line(non pre) come in:

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

<p>hello
How are you</p>

Se si desidera un altro comportamento, scegliere tra uno di questi (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 */

FONTE: scuole W3

Il comando "\ a" nei CSS genera un ritorno a capo. Questo è CSS, non HTML, quindi dovrebbe essere più vicino a quello che vuoi: nessun markup extra .

In una blockquote, l'esempio seguente mostra sia il titolo che il link sorgente e separa i due con un ritorno a capo ( "\a"):

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

Al CSS usa il codice

p {
    white-space: pre-line;
}

Con questo codice CSS ogni invio all'interno del tag P sarà una linea di interruzione nell'html.

Basandosi su ciò che è stato detto prima, questa è una soluzione CSS pura che funziona.

<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>                         <-----------------------------------

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

Per fare in modo che un elemento abbia un'interruzione di riga in seguito, assegnalo:

display:block;

Gli elementi non mobili dopo un elemento a livello di blocco appariranno sulla riga successiva. Molti elementi, come <p> e <div> sono già elementi a livello di blocco, quindi puoi semplicemente usarli.

Ma mentre questo è buono a sapersi, questo dipende molto di più dal contesto dei tuoi contenuti. Nel tuo esempio, non vorrai usare i CSS per forzare un'interruzione di riga. <br /> è appropriato perché semanticamente il tag p è il più appropriato per il testo che stai visualizzando. Non è necessario altro markup solo per appendere CSS. Tecnicamente non è esattamente un paragrafo, ma non esiste un tag <greeting>, quindi usa quello che hai. Descrivendo bene i tuoi contenuti con HTML è il modo più importante - dopo che avete che allora capire come farlo sembrare abbastanza.

Ecco una cattiva soluzione a una cattiva domanda, ma una che soddisfa letteralmente il brief:

p {
    width : 12ex;
}

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

Per un elenco di collegamenti

Le altre risposte forniscono alcuni buoni modi per aggiungere interruzioni di riga, a seconda della situazione. Ma va notato che il :afterselettore è uno dei modi migliori per farlo per il controllo CSS su elenchi di collegamenti (e cose simili), per i motivi indicati di seguito.

Ecco un esempio, assumendo un sommario:

<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>

Ed ecco la tecnica di Simon_Weaver, che è più semplice e più compatibile. Non separa molto stile e contenuto, richiede più codice e potrebbero esserci casi in cui si desidera aggiungere interruzioni dopo il fatto. Comunque un'ottima soluzione, soprattutto per IE più vecchi.

<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>

Nota i vantaggi delle soluzioni di cui sopra:

• Indipendentemente dallo spazio bianco nell'HTML, l'output è lo stesso (vs. pre)
• Nessuna imbottitura aggiuntiva viene aggiunta agli elementi (vedere i display:blockcommenti di NickG )
• È possibile passare facilmente da un elenco di collegamenti orizzontale a uno verticale con alcuni CSS condivisi senza passare a tutti i file HTML per cambiare stile
• No floatoclear stili che incidono sul contenuto circostante
• Lo stile è separato dal contenuto (vs. <br/>, opre con interruzioni codificate)
• Questo può funzionare anche per i collegamenti liberi usando a.toc:aftere<a class="toc">
• È possibile aggiungere più interruzioni e persino testo prefisso / suffisso

Forse qualcuno avrà lo stesso problema come me:

Ero in un elemento con display: flexquindi ho dovuto usare flex-direction: column.

Impostare un brtag sudisplay: none è utile, ma poi puoi finire con WordsRunTogether. Ho trovato più utile sostituirlo con un carattere spaziale, in questo modo:

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: ' ';}
}

Che ne dici di <pre>tag?

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

Ad esempio, puoi aggiungere molta imbottitura e forzare la divisione del testo in una nuova riga

p{
    padding-right: 50%;
}

Ha funzionato bene per me in una situazione con un design reattivo, dove solo all'interno di una certa gamma di larghezza era necessario per dividere il testo.

Mi piacciono le soluzioni molto semplici, ecco un'altra

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

e css

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

Usa overflow-wrap: break-word; piace :

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

Devi dichiarare il contenuto all'interno <span class="class_name"></span> . Dopo di ciò la linea verrà interrotta.

\A indica il carattere di avanzamento riga.

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

Le risposte di Vincent Robert e Joey Adams sono valide. Se non vuoi, tuttavia, modificare il markup, puoi semplicemente inserire a<br /> usando javascript.

Non è possibile farlo nei CSS senza modificare il markup.

Nel mio caso, avevo bisogno di un pulsante di input per avere un'interruzione di linea prima di esso.
Ho applicato il seguente stile al pulsante e ha funzionato:

clear:both;

Nel caso questo aiuti qualcuno ...

Potresti farlo:

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

Con questo css:

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

L'uso al  posto degli spazi impedisce una pausa.

<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>

Questo funziona in Chrome:

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

Immagino che non volessi usare un breakpoint perché romperà sempre la linea. È corretto? In tal caso, che ne dici di aggiungere un punto <br />di interruzione nel tuo testo, quindi assegnargli una classe come <br class="hidebreak"/>allora usando media query proprio sopra la dimensione che vuoi che si interrompa per nascondere il<br /> modo che si spezzi ad una larghezza specifica ma rimanga in linea sopra quella larghezza.

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/

Il codice può essere

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

CSS sarebbe

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

Non farlo. Se si desidera un'interruzione della linea dura, utilizzare uno.