Ignorar o <br> com CSS?

Estou trabalhando em um site que tem quebras de linha inseridas como <br>em alguns dos títulos. Supondo que eu não possa editar o código-fonte HTML, há uma maneira com o CSS de ignorar essas quebras?

Estou otimizando o site para celular, então não quero usar JavaScript.

Com css, você pode "ocultar" as tags br e elas não terão efeito:

br {
    display: none;
}

Se você deseja ocultar apenas alguns dentro de um tipo de título específico, apenas torne seu css mais específico.

h3 br {
    display: none;
}

Observação: esta solução funciona apenas para navegadores Webkit, que aplicam pseudoelementos incorretamente a tags de fechamento automático.

Como adendo às respostas acima, é importante notar que, em alguns casos, é necessário inserir um espaço em vez de simplesmente ignorar <br>:

Por exemplo, as respostas acima irão virar

Monday<br>05 August

para

Monday05 August

como eu tinha verificado enquanto tentava formatar meu calendário de eventos semanais. É preferível inserir um espaço após "segunda-feira". Isso pode ser feito facilmente inserindo o seguinte no CSS:

br  {
    content: ' '
}
br:after {
    content: ' '
}

Isso vai fazer

Monday<br>05 August

parece

Monday 05 August

Você pode alterar o contentatributo em br:afterpara ', 'se desejar separar por vírgulas ou inserir qualquer coisa que desejar ' 'para torná-lo o delimitador! A propósito

Monday, 05 August

parece legal ;-)

Veja aqui uma referência.

Como nas respostas acima, se você quiser torná-lo específico para tags, pode. Como se você quiser que essa propriedade funcione para tag <h3>, basta adicionar um h3each before bre br:after, por exemplo.

Ele funciona mais geralmente para uma pseudo-tag.

Se você adicionar no estilo

br{
    display: none;
}

Então isso vai funcionar. Não tenho certeza se funcionará em versões anteriores do IE.

É assim que eu faço:

br { 
    display: inline;
    content: ' ';
    clear:none;
}

Você pode usar spanelementos em vez de brse quiser que o método de espaço em branco funcione, pois depende de pseudoelementos que "não estão definidos" para elementos substituídos.

HTML

<p>
   To break lines<span class="line-break">in a paragraph,</span><span>don't use</span><span>the 'br' element.</span>
</p>

CSS

span {white-space: pre;}

span:after {content: ' ';}

span.line-break {display: block;}

span.line-break:after {content: none;}

DEMO

A quebra de linha é simplesmente alcançada definindo o elemento span apropriado para display:block.

Ao usar IDs e / ou classes em sua marcação HTML, você pode facilmente direcionar cada um ou combinação de elementos span por CSS ou usar seletores CSS como nth-child().

Assim, você pode, por exemplo, definir diferentes pontos de interrupção usando consultas de mídia para um layout responsivo.

E você também pode simplesmente adicionar / remover / alternar classes por Javascript (jQuery).

A "vantagem" deste método é a sua robustez - funciona em todos os navegadores que suportam pseudo-elementos (ver: Posso usar - Conteúdo gerado em CSS ).

Como alternativa, também é possível adicionar uma quebra de linha por meio de pseudoelementos:

span.break:before {  
    content: "\A";
    white-space: pre;
}

DEMO

Para mim fica melhor assim:

Some text, Some text, Some text

br {
  display: inline;
  content: '';
}

br:after {
  content: ', ';
  display: inline-block;
}

<div style="display:block">
  <span>Some text</span>
  <br>
  <span>Some text</span>
  <br>
  <span>Some text</span>
</div>

Para isso, você pode simplesmente fazer assim:

br{display: none;}

e se estiver dentro de alguma tag PRE, então você pode e se quiser que a tag PRE se comporte como um elemento de bloco regular, você pode usar este CSS:

pre {white-space: normal;}

Ou você pode seguir o estilo de Aneesh Karthik C como:

br  {content: ' '}
br:after {content: ' '}

Eu acho que você percebeu

De acordo com sua pergunta, para resolver este problema para Firefox e Opera usando a abordagem Aneesh Karthik C , você precisa adicionar o atributo "float" right ".

Veja o exemplo aqui. Este CSS funciona no Firefox (26.0), Opera (12.15), Chrome (32.0.1700) e Safari (7.0)

br {
   content: " ";  
   float:right; 
}

Espero que isso responda a sua pergunta !!

Embora esta questão pareça já ter sido resolvida, a resposta aceita não resolveu o problema para mim no Firefox. O Firefox (e possivelmente o IE, embora eu não tenha experimentado) pula os espaços em branco ao ler o conteúdo da tag "conteúdo". Embora eu entenda completamente por que o Mozilla faria isso, ele traz sua cota de problemas. A solução mais fácil que encontrei foi usar espaços inquebráveis ​​em vez de espaços regulares, conforme mostrado abaixo.

.noLineBreaks br:before{
content: '\a0'
}

Dê uma olhada .

Sim, você pode ignorar isso <br>. Você pode precisar disso especialmente no caso de design responsivo, onde você precisa remover interrupções para dispositivos móveis.

HTML

<h2>

  Where ever you go <br class="break"> i am there.

</h2>

CSS para exemplo de celular

/* Resize the browser window to check */

@media (max-width: 640px) 
{
  .break {display: none;}
}

Confira este Codepen:
https://codepen.io/fluidbrush/pen/pojGQyM

Você pode simplesmente convertê-lo em um comentário.

Ou você pode fazer isso:

br {
display: none;
}

Mas se você não quer, por que está colocando isso aí?