resultado:

Olá
Como você está

código:

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

Como conseguir a mesma saída sem <br>?

Impossível com a mesma estrutura HTML, você deve ter algo para distinguir entre Helloe How are you.

Eu sugiro usar spans que você exibirá como blocos (exatamente como <div>na verdade).

p span {
  display: block;
}

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

Você pode usar white-space: pre;para fazer com que os elementos ajam como <pre>, o que preserva novas linhas. Exemplo:

p {
  white-space: pre;
}

<p>hello 
How are you</p>

Observe para o IE que isso funciona apenas no IE8 +.

Use <br/>normalmente, mas esconda-o display: nonequando não desejar.

Eu esperaria que a maioria das pessoas que encontrar essa pergunta queira usar o design responsivo / css para decidir se uma quebra de linha aparece ou não em um local específico. (e não tem nada pessoal contra <br/>)

Embora não seja imediatamente óbvio, você pode realmente aplicar display:noneuma <br/>tag para ocultá-la, o que permite o uso de consultas de mídia em conjunto com as tags 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)
    }
 }

Isso é útil no design responsivo, onde você precisa forçar o texto em duas linhas em uma quebra exata.

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

Existem várias opções para definir a manipulação de espaços em branco e quebras de linha. Se alguém pode colocar o conteúdo, por exemplo, em uma <p>tag, é muito fácil obter o que se deseja.

Para preservar quebras de linha, mas não espaços em branco, use pre-line(não pre) como em:

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

<p>hello
How are you</p>

Se outro comportamento for desejado, escolha um deles (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: Escolas W3

O comando "\ a" em CSS gera um retorno de carro. Este é CSS, não HTML, portanto, deve estar mais próximo do que você deseja: sem marcação extra .

Em uma citação em bloco, o exemplo abaixo exibe o título e o link de origem e separa os dois com um retorno de carro ("\a" ):

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

No CSS, use o código

p {
    white-space: pre-line;
}

Com esse código css, cada entrada dentro da tag P será uma quebra de linha no html.

Com base no que foi dito antes, esta é uma solução 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> <--------------------------------------

OU

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

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

Para fazer com que um elemento tenha uma quebra de linha depois, atribua-o:

display:block;

Elementos não flutuantes após um elemento de nível de bloco aparecerão na próxima linha. Muitos elementos, como <p> e <div>, já são elementos no nível do bloco, para que você possa usá-los.

Mas, embora seja bom saber, isso realmente depende mais do contexto do seu conteúdo. No seu exemplo, você não gostaria de usar CSS para forçar uma quebra de linha. O <br /> é apropriado porque semanticamente a tag p é a mais apropriada para o texto que você está exibindo. Mais marcação apenas para desligar o CSS, é desnecessário. Tecnicamente, não é exatamente um parágrafo, mas não existe uma tag <greeting>; portanto, use o que você possui. Descrever bem o seu conteúdo com HTMl é muito mais importante - depois que você o tiver , descubra como torná-lo bonito.

Aqui está uma solução ruim para uma pergunta ruim, mas que literalmente atende ao breve:

p {
    width : 12ex;
}

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

Para uma lista de links

As outras respostas fornecem algumas boas maneiras de adicionar quebras de linha, dependendo da situação. Mas deve-se notar que o :afterseletor é uma das melhores maneiras de fazer isso para o controle CSS sobre listas de links (e coisas semelhantes), pelas razões indicadas abaixo.

Aqui está um exemplo, assumindo um índice:

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

E aqui está a técnica de Simon_Weaver, que é mais simples e mais compatível. Não separa muito o estilo e o conteúdo, requer mais código e pode haver casos em que você deseja adicionar quebras após o fato. Ainda é uma ótima solução, especialmente para o IE mais antigo.

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

Observe as vantagens das soluções acima:

• Não importa o espaço em branco no HTML, a saída é a mesma (vs. pre )
• Nenhum preenchimento extra é adicionado aos elementos (consulte NickG's display:block comentários )
• Você pode alternar facilmente entre listas horizontais e verticais de links com algum CSS compartilhado sem precisar ir a todos os arquivos HTML para alterar o estilo.
• Nenhum estilo floatou clearestilos que afetam o conteúdo ao redor
• O estilo é separado do conteúdo (vs. <br/>ou precom quebras codificadas)
• Isso também pode funcionar para links soltos usando a.toc:aftere<a class="toc">
• Você pode adicionar várias quebras e até texto de prefixo / sufixo

Talvez alguém tenha o mesmo problema que eu:

Eu estava em um elemento com, display: flexentão tive que usar flex-direction: column.

Configurando uma brtag paradisplay: none útil é útil, mas você pode acabar com o WordsRunTogether. Achei mais útil substituí-lo por um caractere de espaço, assim:

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

Que tal <pre>tag?

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

Você pode adicionar muito preenchimento e forçar o texto a ser dividido em nova linha, por exemplo

p{
    padding-right: 50%;
}

Funcionou bem para mim em uma situação com design responsivo, onde somente dentro de uma certa faixa de largura era necessário que o texto fosse dividido.

Eu gosto de soluções muito simples, aqui está mais uma

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

e css

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

Use overflow-wrap: break-word; gostar :

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

Você precisa declarar o conteúdo dentro <span class="class_name"></span>. Depois disso, a linha será interrompida.

\A significa caractere de avanço de linha.

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

As respostas de Vincent Robert e Joey Adams são válidas. Se você não quiser, no entanto, alterar a marcação, basta inserir um<br /> javascript usando.

Não há como fazer isso em CSS sem alterar a marcação.

No meu caso, eu precisava de um botão de entrada para ter uma quebra de linha antes dele.
Apliquei o seguinte estilo no botão e ele funcionou:

clear:both;

Caso isso ajude alguém ...

Você pode fazer isso:

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

Com este css:

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

Usar em  vez de espaços impedirá uma 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>

Isso funciona no Chrome:

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

Suponho que você não desejou usar um ponto de interrupção porque ele sempre quebrará a linha. Isso está correto? Em caso afirmativo, que tal adicionar um ponto de interrupção <br />no seu texto e atribuir a ela uma classe, como <br class="hidebreak"/>usar a consulta de mídia logo acima do tamanho que você deseja interromper para ocultar o<br /> que quebra em uma largura específica, mas permanece alinhado acima dessa largura.

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/

O código pode ser

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

CSS seria

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

Não. Se você deseja uma quebra de linha rígida, use uma.