Você pode direcionar <br /> com css?


160

É possível segmentar a <br/>tag de quebra de linha com CSS?

Gostaria de ter uma linha tracejada de 1px sempre que houver uma quebra de linha. Estou personalizando um site com meu próprio CSS e não posso alterar o HTML definido, caso contrário, usaria de outra maneira.

Não acho que seja possível, mas talvez haja uma maneira de alguém conhecer.


Respostas:


169

BRgera uma quebra de linha e é apenas uma quebra de linha. Como esse elemento não tem conteúdo, existem apenas alguns estilos que fazem sentido para aplicar nele, como clearou position. Você pode definir BRa borda, mas não a verá, pois não possui dimensão visual.

Se você deseja separar visualmente duas frases, provavelmente deseja usar a régua horizontal que se destina a esse objetivo. Como você não pode alterar a marcação, receio que, usando apenas CSS, você não consiga isso.

Parece, já foi discutido em outros fóruns. Extrato de Re: Configurando a altura de um elemento BR usando CSS :

[T] isso leva a um status um tanto estranho para BR, porque, por um lado, não está sendo tratado como um elemento normal, mas como uma instância de \ A no conteúdo gerado, mas, por outro lado, está sendo tratado como um elemento normal em que (um subconjunto limitado de) propriedades CSS está sendo permitido nele.

Também encontrei um esclarecimento na especificação CSS 1 (nenhuma especificação de nível superior menciona):

As propriedades e os valores atuais do CSS1 não podem descrever o comportamento do elemento 'BR'. No HTML, o elemento 'BR' especifica uma quebra de linha entre as palavras. Com efeito, o elemento é substituído por uma quebra de linha. Versões futuras do CSS podem manipular conteúdo adicionado e substituído, mas os formatadores baseados em CSS1 devem tratar 'BR' especialmente.

Os testes de Grant Wagner mostram que não há como estilizar BRcomo você pode fazer com outros elementos. Há também um site on-line onde você pode testar os resultados no seu navegador .

Atualizar

A Pelms fez algumas investigações adicionais e apontou que o IE8 (no Win7) e o Chrome 2 / Safari 4b permitem estilizar BRum pouco. De fato, verifiquei a página de demonstração do IE com o mecanismo IE8 do IE Net Renderer e funcionou.

Update 2 C69 fez algumas novas investigações, e verifica-se que você pode estilizar o marcador para brmuito fortemente (embora, não cross-browser), mas isso não afetará a linha-quebrar-se, porque parecem pertencer a contêiner pai.


Ótima resposta. Se não for um navegador cruzado, não vale a pena tentar estilizá-lo, a menos que você esteja segmentando apenas um navegador (por exemplo, apenas dispositivos móveis, talvez). Caso contrário, parece fazer sentido para modificar o seu HTML para permitir styling (<p> marcas, alguém?)
razzed

49

Tente o seguinte, montei-o usando a Atualização 2 de outra resposta com votos altos e funcionou perfeitamente para mim:

br
{   content: "A" !important;
    display: block !important;
    margin-bottom: 1.5em !important;
}

Parece não funcionar no Edge e no IE, mas não são navegadores reais.
Jester

31

Há um bom motivo para você precisar estilizar uma <br>tag.

Quando faz parte do código, você não deseja (ou não pode) alterar e deseja esse particular <br> não seja exibido.

.xxx br {display:none}

Pode economizar muito tempo e às vezes o seu dia.


20

Para o benefício de futuros visitantes que possam ter perdido meus comentários:

br {
    border-bottom:1px dashed black;
}

não funciona.

Foi testado no IE 6, 7 e 8, Firefox 2, 3 e 3.5B4, Safari 3 e 4 para Windows, Opera 9.6 e 10 (alpha) e Google Chrome (versão 2) e não funcionou em nenhum dos eles. Se em algum momento no futuro alguém encontrar um navegador que suporte uma borda em um<br> elemento, fique à vontade para atualizar esta lista.

Observe também que tentei várias outras coisas:

br {
    border-bottom:1px dashed black;
    display:block;
}

br:before { /* and :after */
    border-bottom:1px dashed black;
    /* content and display added as per porneL's comment */
    content: "";
    display: block;
}

br { /* and :before and :after */
    content: url(a_dashed_line_image);
}

Desses, o seguinte funciona no Opera 9.6 e 10 (alpha) (obrigado porneL!):

br:after {
    border-bottom:1px dashed black;
    content: "";
    display: block;
}

Não é muito útil quando é suportado apenas em um navegador, mas sempre acho interessante ver como diferentes navegadores implementam a especificação.


3
: antes não existe sem conteúdo. Adicione content:""; display:blockà segunda regra.
Kornel

10

Sei que você não pode editar o HTML, mas se você pode modificar o CSS, pode adicionar javascript?

Nesse caso, você pode incluir jquery, então você pode fazer

<script language="javascript">
$(document).ready(function() {
    $('br').append('<span class="myclass"></span>');
});
</script>

1
Você quer dizer $ ('br'). Before ('<span class = "myclass"> </span>');
117811 molokoloco

10
br { padding: 1px 8px; border-bottom: 1px dashed #000 }

processa como abaixo no IE8 ... embora não seja muito útil em apenas um navegador.

Captura de tela do IE 8

(NB eu estou usando o IE 8.0.7100 (no Win7 RC) se isso faz alguma diferença)

Além disso,

br:after { content: "..." }  
br { content: "" }`

ou,

br:after {
    border: 1px none black;
    border-bottom-style: dashed;
    content: "";
    padding: 0 6px 0;
}

br { content: "" }

fornece uma linha tracejada no Chrome 2 / Safari 4b, mas perde a quebra de linha que (a menos que alguém possa encontrar uma maneira de reintroduzir isso) a torna menos que inútil.

por exemplo ,
teste IE8 , teste Chrome / Safari e outro


Isso é interessante. Não posso reproduzir isso no IE8. Você pode colocar um exemplo on-line que se parece com o IE8 como sua imagem incorporada?
Viam0Zah

Links adicionados - O Win7 usa uma versão ligeiramente diferente do IE8, caso isso faça alguma diferença.
Pelms 25/05/09

1
@pelms Obrigado, verifiquei a página de teste do IE com o IENetRenderer e ela realmente mostra a borda abaixo BR. Obrigado, atualizei minha resposta com os resultados dos seus testes.
Viam0Zah 26/09/09

2

Meus próprios testes mostram conclusivamente que as brtags não gostam de ser segmentadas para css.

Mas se você pode adicionar estilo, provavelmente também pode adicionar uma tag de script ao cabeçalho da página? Link para um externo .jsque faz algo parecido com isto:

function replaceLineBreaksWithHorizontalRulesInElement( element )
{
    elems = element.getElementsByTagName( 'br' );
    for ( var i = 0; i < elems.length; i ++ )
    {
        br = elems.item( i );
        hr = document.createElement( 'hr' );
        br.parentNode.replaceChild( hr, br );
    }
}

Em resumo, não é o ideal, mas aqui está a minha solução.


'Não posso mudar o html infelizmente', escreveu o dc3.
Viam0Zah

2
@ Török: A resposta que postei não é puramente para o OP, mas para todos que encontrarem esta página com uma pergunta semelhante.
284 Kris

2

isso parece resolver o problema:

<!DOCTYPE html>

<style type="text/css">
#someContainer br { display:none }
#someContainer br + a:before { content:"|"; color: transparent; letter-spacing:-100px; border-left: 1px dashed black; margin:0 5px; }
</style>

<div id="someContainer"><a>link</a><br /><a>link</a><br /><a>link</a></div>

1

BR é um elemento embutido, não um elemento de bloco.

Então, você precisa:

 br.Underline{
    border-bottom:1px dashed black;
    display: block;
  }

Caso contrário, os navegadores que são um pouco mais exigentes sobre essas coisas se recusam a aplicar bordas aos seus elementos BR, já que os elementos embutidos não têm bordas, preenchimento ou margens.


Elementos inline não têm fronteiras, preenchimentos e margens - apenas se comportam outra maneira.
Viam0Zah

Estou experimentando coisas no Fx com o Firebug. Eu também tinha tentado isso, mas não funcionou para mim. Percebo que a barra na marca de quebra de linha não está flutuando (se essa é a terminologia correta), ou seja, não há espaço entre o br e o /. isso é um fator? Eu pensei que tinha que haver um espaço. Eu editei o html de qualquer maneira no firebug para corrigir isso e ainda nada. de qualquer forma, obrigado por toda a ajuda das pessoas - nunca usei este site antes e estou muito surpreso com a rapidez com que obtive uma resposta. grande comunidade que você chegou aqui.
Dc3 22/05/09

2
@richard: Você realmente testou isso? Em caso afirmativo, quais navegadores? Eu tentei no IE 6, 7 e 8, Firefox 2, 3 e 3.5B4, Safari 3 e 4 para Windows, Opera 9.6 e 10 (beta) e Google Chrome (versão 1) e não funcionou em nenhum deles .
Grant Wagner

1

ATUALIZADO 13/09/2019:

O objetivo de estilizar a <br>tag dessa maneira é fazer uma quebra de linha "maior" (ou seja, com um pouco de espaço extra entre as linhas).

A classe "oldbig" (abaixo) foi testada e funcionou corretamente no Chrome 66.0.3359.181, Firefox Quantum 60.0.2, Edge 42.17134.1.0 e IE 11.48.17134.0, para estilizar. Infelizmente, ele quebrou na versão 76 do Chrome e seus derivados (por volta de agosto de 2019). O sintoma é que o espaço extra entre as linhas não é mais exibido.

A classe "newbig" foi testada e está funcionando corretamente nas versões atuais do Chrome (76.0.3809.132), Opera, Firefox, Edge, IE, Brave e Palemoon:

br.oldbig {line-height:190%;vertical-align:top;}
br.newbig {display:block;content:"";margin-top:0.5em;line-height:190%;vertical-align:top;}

Aqui está uma demonstração:

br.oldbig {line-height:175%;vertical-align:top;}
br.newbig {display:block;content:"";margin-top:0.5em;line-height:190%;vertical-align:top;}
<p style="max-width:20em">This is a paragraph which demonstrates the difference 
 between a line-break which occurs when the text exceeds the max-width, and a 
 line-break forced by a &lt;br&gt; tag here:<br>
 and a line break forced by a &lt;br class=oldbig&gt; tag here:<br class=oldbig>
 and a line break forced by a &lt;br class=newbig&gt; tag here:<br class=newbig>
 This is the next line after the &lt;br class=newbig&gt; tag (but still 
 part of the same paragraph).</p>
<p style="max-width:20em">And this is another paragraph, entirely.</p>

Este é o resultado, exibido no Chrome v.76:

captura de tela


0

Isso funcionará, mas apenas no IE. Eu testei no IE8.

br {

  border-bottom: 1px dashed #000000;
  background-color: #ffffff;
  display: block;
  }

0

Coloquei uma <br>marca em uma <span>marca e pude usá display:none;-la <span>para controlar quando não usar a <br>marca usando as Consultas de Mídia.


Por que não apenas segmentar <br>diretamente o em vez de envolvê-lo em um espaço?
Gavin

0

pergunta antiga, mas essa é uma correção bastante clara e pode ser usada por pessoas que ainda estão se perguntando se é possível :):

br{
    content: '.';
    display: inline-block;
    width: 100%;
    border-bottom: 1px dashed black;
}

Com essa correção, você também pode remover BRs em sites (basta definir a largura para 0px)


-2

Por que não usar apenas a tag HR? É feito exatamente para o que você deseja. É como tentar fazer um garfo para comer sopa quando há uma colher bem na sua frente na mesa.


não funciona para todos os casos de uso causa hr é um elemento de bloco - mesmos styling é limitado
Thariama

1
Aparentemente, ele quer usar claramente: tudo, veja a excelente resposta de Gabor. Portanto, sua metáfora de garfo não faz nenhum sentido.
precisa saber é o seguinte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.