Pouvez-vous cibler <br /> avec css?


160

Est-il possible de cibler la <br/>balise de saut de ligne avec CSS?

Je voudrais avoir une ligne pointillée 1px à chaque fois qu'il y a un saut de ligne. Je personnalise un site avec mon propre CSS et je ne peux pas modifier le code HTML défini, sinon j'utiliserais une autre méthode.

Je ne pense pas que ce soit possible, mais il y a peut-être un moyen que quelqu'un connaisse.


Réponses:


169

BRgénère un saut de ligne et ce n'est qu'un saut de ligne. Comme cet élément n'a pas de contenu, il n'y a que quelques styles qui ont du sens à y appliquer, comme clearou position. Vous pouvez définir BRla bordure de ce dernier mais vous ne le verrez pas car il n'a pas de dimension visuelle.

Si vous aimez séparer visuellement deux phrases, vous voudrez probablement utiliser la règle horizontale qui est destinée à cet objectif. Puisque vous ne pouvez pas changer le balisage, j'ai bien peur qu'en utilisant uniquement CSS, vous ne pouvez pas y parvenir.

Il semble que cela ait déjà été discuté sur d'autres forums. Extrait de Re: Définition de la hauteur d'un élément BR à l'aide de CSS :

[C] e conduit à un statut quelque peu étrange pour BR en ce que d'une part il n'est pas traité comme un élément normal, mais plutôt comme une instance de \ A dans le contenu généré, mais d'autre part, il est traité comme un élément normal en ce que (un sous-ensemble limité de) propriétés CSS y sont autorisées.

J'ai également trouvé une clarification dans la spécification CSS 1 (aucune spécification de niveau supérieur ne la mentionne):

Les propriétés et valeurs CSS1 actuelles ne peuvent pas décrire le comportement de l'élément 'BR'. En HTML, l'élément «BR» spécifie un saut de ligne entre les mots. En effet, l'élément est remplacé par un saut de ligne. Les futures versions de CSS peuvent gérer le contenu ajouté et remplacé, mais les formateurs basés sur CSS1 doivent traiter spécialement «BR».

Les tests de Grant Wagner montrent qu'il n'y a aucun moyen de styliser BRcomme vous pouvez le faire avec d'autres éléments. Il existe également un site en ligne où vous pouvez tester les résultats dans votre navigateur .

Mettre à jour

pelms a fait quelques recherches supplémentaires et a souligné que IE8 (sur Win7) et Chrome 2 / Safari 4b vous permet de créer BRun peu de style . Et en effet, j'ai vérifié la page de démonstration d' IE avec le moteur IE8 d' IE Net Renderer , et cela a fonctionné.

Mise à jour 2 C69 fait d'autres enquêtes, et il se trouve que vous pouvez le style de la marque pour brassez fortement (mais pas multi-navigateur), mais cela n'affectera pas la rupture de ligne elle - même, parce qu'il semble appartenir à conteneur parent.


Très bonne réponse. S'il ne s'agit pas de plusieurs navigateurs, cela ne vaut pas la peine d'essayer de le styliser à moins que vous ne cibliez uniquement le seul navigateur (par exemple, un appareil mobile uniquement). Sinon, il semble judicieux de modifier votre HTML pour autoriser le style (balises <p>, n'importe qui?)
razzed

49

Essayez ce qui suit, je l'ai assemblé à l'aide de la mise à jour 2 d'une autre réponse avec des votes élevés, et cela a parfaitement fonctionné pour moi:

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

Cela ne semble pas fonctionner sur Edge et IE, mais ce ne sont pas de vrais navigateurs.
Jester

31

Il y a une bonne raison pour laquelle vous auriez besoin de styliser une <br>balise.

Quand cela fait partie du code, vous ne voulez pas (ou ne pouvez pas) changer et vous voulez que ce particulier <br>ne soit pas affiché.

.xxx br {display:none}

Peut gagner beaucoup de temps et parfois votre journée.


20

Pour le bénéfice de tout futur visiteur qui aurait manqué mes commentaires:

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

ne marche pas.

Il a été testé dans IE 6, 7 et 8, Firefox 2, 3 et 3.5B4, Safari 3 et 4 pour Windows, Opera 9.6 et 10 (alpha) et Google Chrome (version 2) et il n'a fonctionné dans aucun des leur. Si, à un moment donné dans le futur, quelqu'un trouve un navigateur qui prend en charge une bordure sur un <br>élément, n'hésitez pas à mettre à jour cette liste.

Notez également que j'ai essayé un certain nombre d'autres choses:

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

Parmi ceux-ci, ce qui suit fonctionne dans Opera 9.6 et 10 (alpha) (merci porneL!):

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

Pas très utile quand il n'est pris en charge que dans un navigateur, mais je trouve toujours intéressant de voir comment différents navigateurs implémentent la spécification.


3
: avant n'existe pas sans contenu. Ajoutez content:""; display:blockà la deuxième règle.
Kornel

10

Je sais que vous ne pouvez pas modifier le HTML, mais si vous pouvez modifier le CSS, pouvez-vous ajouter du javascript?

si c'est le cas, vous pouvez inclure jquery, alors vous pouvez faire

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

1
Vous voulez dire $ ('br'). Before ('<span class = "myclass"> </span>');
molokoloco

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

rend comme ci-dessous dans IE8 ... pas beaucoup d'utilisation dans un seul navigateur cependant.

Capture d'écran d'IE 8

(NB j'utilise IE 8.0.7100 (sur Win7 RC) si cela fait une différence)

Aussi,

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

ou,

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

br { content: "" }

donne une ligne en pointillé dans Chrome 2 / Safari 4b mais perd le saut de ligne qui (à moins que quiconque ne puisse trouver un moyen de le réintroduire) le rend moins qu'inutile.

par exemple
test de IE8 , Chrome / test Safari et une autre


C'est intéressant. Je ne peux pas reproduire cela sous IE8. Pouvez-vous mettre en ligne un exemple qui ressemble à votre IE8 en tant qu'image intégrée?
viam0Zah

Liens ajoutés - Win7 utilise une version légèrement différente d'IE8 au cas où cela ferait une différence.
pelms

1
@pelms Merci, j'ai vérifié la page de test IE avec IENetRenderer et elle montre vraiment la bordure en dessous BR. Merci, j'ai mis à jour ma réponse avec les résultats de vos tests.
viam0Zah

2

Mes propres tests montrent de manière concluante que les brbalises n'aiment pas être ciblées pour le CSS.

Mais si vous pouvez ajouter du style, vous pouvez probablement également ajouter une balise de script à l'en-tête de la page? Lien vers un externe .jsqui fait quelque chose comme ceci:

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

Bref, ce n'est pas optimal, mais voici ma solution.


«Je ne peux malheureusement pas changer le code HTML», a écrit dc3.
viam0Zah

2
@ Török: La réponse que j'ai publiée n'est pas uniquement pour l'OP mais pour tout le monde qui trouve cette page avec une question similaire.
Kris

2

cela semble résoudre le problème:

<!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 est un élément en ligne, pas un élément de bloc.

Donc, vous avez besoin de:

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

Sinon, les navigateurs qui sont un peu plus sélectifs sur de telles choses refuseront d'appliquer des bordures à vos éléments BR, car les éléments en ligne n'ont pas de bordures, de remplissage ou de marges.


Éléments en ligne n'ont des frontières, rembourrages et des marges - ne se comportent autrement.
viam0Zah

J'essaye des choses dans Fx avec Firebug. J'avais essayé ça aussi mais ça n'a pas fonctionné pour moi. Je remarque que la barre oblique dans la balise de saut de ligne n'est pas flottante (si c'est la terminologie correcte), c'est-à-dire qu'il n'y a pas d'espace entre le br et le /. est-ce un facteur. J'avais pensé qu'il devait y avoir un espace. J'ai quand même édité le html dans Firebug pour résoudre ce problème et toujours rien. en tout cas merci pour toutes les personnes d'aide - je n'ai jamais utilisé ce site auparavant et je suis très surpris de la rapidité avec laquelle j'ai obtenu une réponse. grande communauté que vous avez ici.
dc3

2
@richard: Avez-vous réellement testé ceci, si oui, quel (s) navigateur (s)? Je l'ai essayé dans IE 6, 7 et 8, Firefox 2, 3 et 3.5B4, Safari 3 et 4 pour Windows, Opera 9.6 et 10 (bêta) et Google Chrome (version 1) et cela n'a fonctionné dans aucun d'entre eux .
Grant Wagner

1

MISE À JOUR 13/09/2019:

Le but de styliser la <br>balise comme ceci est de faire un saut de ligne "plus grand" (c'est-à-dire avec un peu d'espace supplémentaire entre les lignes).

La classe "oldbig" (ci-dessous) a été testée et fonctionnait correctement dans Chrome 66.0.3359.181, Firefox Quantum 60.0.2, Edge 42.17134.1.0 et IE 11.48.17134.0, au style. Malheureusement, il a cassé dans la version 76 de Chrome et ses dérivés (vers août 2019). Le symptôme est que l'espace supplémentaire entre les lignes n'est plus affiché.

La classe "newbig" est testée et fonctionne correctement dans les versions actuelles de Chrome (76.0.3809.132), Opera, Firefox, Edge, IE, Brave et Palemoon:

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

Voici une démo:

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>

Voici le résultat, affiché dans Chrome v.76:

capture d'écran


0

Cela fonctionnera, mais uniquement dans IE. Je l'ai testé dans IE8.

br {

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

0

J'ai placé une <br>balise dans une <span>étiquette et a été en mesure d'utiliser display:none;le <span>au contrôle quand ne pas utiliser l' <br>étiquette à l' aide des médias Requêtes.


Pourquoi ne pas simplement cibler le <br>directement au lieu de l'envelopper dans une étendue?
Gavin le

0

vieille question mais c'est une solution assez soignée et propre, pourrait être utilisée pour les personnes qui se demandent encore si c'est possible :):

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

avec ce correctif, vous pouvez également supprimer les BR sur les sites Web (il suffit de définir la largeur sur 0px)


-2

Pourquoi ne pas simplement utiliser le tag HR? Il est fait exactement pour ce que vous voulez. Un peu comme essayer de faire une fourchette pour manger de la soupe quand il y a une cuillère juste devant vous sur la table.


ne fonctionne pas pour tous les cas d'utilisation car hr est un élément de bloc - le style est donc limité
Thariama

1
Apparemment, il veut utiliser clair: tout, voir l'excellente réponse de Gabor. Donc, votre métaphore de la fourchette n'a aucun sens.
eddy147
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.