J'ai un gros paragraphe de texte qui est divisé en sous-paragraphes avec <br>:

<p>
  Blah blah blah.
  <br/>
  Blah blah blah. Blah blah blah. Blah blah blah.
  <br/>
  Blah blah blah.
</p>

Je veux creuser l'écart entre ces sous-paragraphes, comme s'il y en avait deux <br>ou quelque chose comme ça. Je sais que la bonne façon de le faire est d'utiliser <p></p>, mais pour le moment je ne peux pas changer cette disposition, donc je recherche une solution CSS uniquement.

J'ai essayé de régler <br>des line-heightet heightavec display: block, j'ai aussi googlé et Stack Overflow-ed brièvement, mais je n'ai trouvé aucune solution. Est-ce même possible sans changer la disposition?

Css:

br {
   display: block;
   margin: 10px 0;
}

La solution n'est probablement pas compatible avec tous les navigateurs, mais c'est au moins quelque chose. Pensez également à définir line-height:

line-height:22px;

Pour Google Chrome, pensez à définir content:

content: " ";

En dehors de cela, je pense que vous êtes coincé avec une solution JavaScript.

Voici la bonne solution qui prend en charge plusieurs navigateurs:

  br {
        line-height: 150%;
     }

Donc, les coups d'œil ci-dessus ont essentiellement une réponse similaire, mais ici, c'est très succinct. Fonctionne dans Opera, Chrome, Safari et Firefox, probablement IE aussi?

br {
            display: block; /* makes it have a width */
            content: ""; /* clears default height */
            margin-top: 0; /* change this to whatever height you want it */
}

Une autre façon consiste à utiliser un HR . Mais, et voici la partie rusée, rendez-la invisible.

Donc:

<hr style="height:30pt; visibility:hidden;" />

Pour faire une pause BR plus propre simulée en utilisant le HR: Btw fonctionne dans tous les navigateurs !!

{ height:2px; visibility:hidden; margin-bottom:-1px; }

Pour autant que je sais <br>ne pas avoir une hauteur, elle oblige simplement un saut de ligne. Ce que vous avez est un texte avec des sauts de ligne en plus de ceux qui sont automatiquement encapsulés, pas des sous- paragraphes. Vous pouvez modifier l'espacement des lignes, mais cela affectera toutes les lignes.

Je viens d'avoir ce problème et je l'ai contourné en utilisant

<div style="line-height:150%;">
    <br>
</div>

vous pouvez appliquer la hauteur de ligne sur cet <p>élément afin que les lignes deviennent plus grandes.

Je n'ai jamais essayé le pseudo-élément :before/ :afterCSS2 auparavant, principalement parce qu'il n'est pris en charge que dans IE8 (cela concerne les navigateurs IE) . Cela pourrait être la seule solution CSS possible:

br:before {
    display: block;
    margin-top: 10px;
    content: "";
}

Voici un exemple sur QuirksMode .

J'ai pensé que vous pourriez utiliser:

br:after {
    content: ".";
    visibility: hidden;
    display: block;
}

Mais cela n'a pas fonctionné sur Chrome ou Firefox.

Je pensais juste mentionner cela au cas où cela arriverait à quelqu'un d'autre et je leur éviterais les ennuis.

br {   
    content: "";
    margin: 2em;
    display: block;
    margin-bottom: -20px; 
 }

Fonctionne dans Firefox, Chrome et Safari. N'ont pas été testés dans Explorer. (La tablette Windows est hors tension.)

Les sauts de ligne et la taille de police fonctionnent différemment dans Firefox et Safari.

Fait intéressant, si la balise break est écrite au format complet comme suit:

<br></br>

puis la hauteur de ligne CSS: 145% fonctionne. Si la balise break est écrite comme suit:

<br> or 
<br/> 

alors cela ne fonctionne pas, au moins dans Chrome, IE et Firefox. Bizarre!

Ce qui fonctionne pour moi, c'est d'ajouter cette ligne entre les balises de paragraphe ... mais pas la meilleure solution.

<br style="line-height:32px">

-------- Éditer ---------

J'ai rencontré des problèmes avec PC / Mac avec cela ... Cela donne au texte la nouvelle hauteur de ligne mais ne fait pas le saut de ligne ... Vous voudrez peut-être faire quelques tests vous-même. Désolé!

Et rappelez-vous que (mal) utiliser la <hr>balise comme suggéré quelque part, mettra fin à la <p>balise, alors oubliez cette solution.
Si f.ex. quelque chose est stylisé sur l'environnement <p>, ce style a disparu pour le reste du contenu après l' <hr>insertion du.

Voici une solution qui fonctionne dans IE, Firefox et Chrome. L'idée est d'augmenter la taille de police de l'élément br de la taille du corps de 14px à 18px, et d'abaisser l'élément de 4px pour que la taille supplémentaire soit en dessous de la ligne de texte. Le résultat est 4px d'espace supplémentaire en dessous du br.

br 
{ 
font-size: 18px; 
vertical-align: -4px; 
}  

MIS À JOUR LE 13 SEPTEMBRE 2019:

J'utilise <br class=big>pour faire une rupture de ligne surdimensionnée, quand j'en ai besoin. Jusqu'à aujourd'hui, je l'ai stylé comme ceci:

br.big {line-height:190%;vertical-align:top}

(Le vertical-align:topn'était nécessaire que pour IE et Edge.)

Cela a fonctionné dans tous les principaux navigateurs que j'ai essayés: Chrome, Firefox, Opera, Brave, PaleMoon, Edge et IE11.

Cependant, il a récemment cessé de fonctionner dans les navigateurs Chrome : mes «gros» sauts de ligne se sont transformés en sauts de ligne de taille normale.

(Je ne sais pas exactement quand ils l'ont cassé. Au 12 septembre 2019, il fonctionne toujours dans mon Chromium Portable 55.0.2883.11 obsolète, mais il est cassé dans Opera 63.0.3368.71 et Chrome 76.0.3809.132 (les deux Windows et Android).)

Après quelques essais et erreurs, je me suis retrouvé avec le substitut suivant, qui fonctionne dans les versions actuelles de tous ces navigateurs:

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

Remarques:

line-height:190% fonctionne dans tout sauf les versions récentes des navigateurs basés sur Chrome.

vertical-align:topest nécessaire pour IE et Edge (en combinaison avec line-height:190%), pour obtenir l'espace supplémentaire à venir après la ligne précédente, où il appartient, plutôt que partiellement avant et partiellement après.

display:block;content:"";margin-top:0.5em fonctionne dans Chrome, Opera et Firefox, mais pas Edge et IE.

Une autre façon (plus simple) d'ajouter un peu d'espace vertical supplémentaire après une <br>balise, si cela ne vous dérange pas de modifier le code HTML, est avec quelque chose comme ça. Cela fonctionne bien dans tous les navigateurs:

<span style="vertical-align:-37%"> </span><br>

(Vous pouvez, bien sûr, ajuster le "-37%" selon les besoins, pour un écart plus grand ou plus petit.) Voici une page de démonstration qui comprend d'autres variantes sur le thème:

https://burtonsys.com/a_little_extra_vertical_space_for_br_tag.html



28 mai 2020:

J'ai mis à jour la page de démonstration; il montre maintenant toutes les techniques ci-dessus:

https://burtonsys.com/a_little_extra_vertical_space_for_br_tag.html

Michael et yoda ont tous deux raison. Ce que vous pouvez faire est d'utiliser la <p>balise, qui, étant une balise de bloc, utilise une marge inférieure pour compenser le bloc suivant, vous pouvez donc faire quelque chose de similaire pour obtenir un espacement plus grand:

<p>
    A block of text.
</p>
<p>
    Another block
</p>

Une autre alternative consiste à utiliser la <hr>balise de bloc , avec laquelle vous pouvez définir explicitement la hauteur de l'espacement.

<br />prendra autant d'espace que la ligne remplie de texte de votre <p>, vous ne pouvez pas changer cela. Si vous voulez plus grand, cela signifie que vous voulez vous séparer en paragraphe, alors ajoutez-en d'autres <p>. N'oubliez pas d'être le plus sémantique possible;)

vous pouvez également utiliser la propriété "block-quote" en CSS. Cela ferait en sorte que cela n'affecte pas vos lignes individuelles mais vous permet de définir des paramètres pour les sauts entre les paragraphes ou les "guillemets".

MISE À JOUR:
Je me tiens corrigé. "blockquote" est en fait une propriété html. Vous l'utilisez comme <p> et </ p> autour de votre travail. Vous pouvez ensuite définir les paramètres de votre devis de bloc en CSS comme

blockquote { margin-top: 20px }

J'espère que cela t'aides. Il est similaire à la définition des paramètres sur le br et peut être compatible avec plusieurs navigateurs ou non.

Vous ne semblez pas être en mesure de régler la hauteur d'un BR, mais vous pouvez le faire disparaître de manière fiable à l'aide de l'affichage: aucun

Je suis tombé sur cette page lors de la recherche d'une solution aux problèmes suivants:

J'ai une situation où la passerelle de paiement tiers (Worldpay) vous permet uniquement de personnaliser leurs pages de paiement avec 10k max de CSS et HTML (aucun script autorisé) qui sont injectés dans le corps de leur modèle, et après quelques BR, balises FONT, etc. Couplé à leur DTD qui force IE7 / 8 en mode Quirks, cela rend la personnalisation entre les navigateurs aussi difficile que possible!

Désactiver les BR rend les choses beaucoup plus cohérentes ...

J'utilise ces méthodes, mais je ne sais pas si plusieurs navigateurs

================= Méthode 1 ==================

br {
    display:none;
}

OU

================= Méthode 2 ==================

br {
    display: block;
    margin-bottom: 2px;
    font-size:2px;
    line-height: 2px;
}
br:before {
    display: block;
    margin-top: 2px;
    content: "";
}
br:after {
    content: ".";
    visibility: hidden;
    display: block;
}

OU

================= Méthode 3 ==================

br:after { content: "" }
br { content: "" }

Essayez d'utiliser l' line-heightattribut CSS sur votre pbalise qui contient la brbalise. N'oubliez pas que vous pouvez utiliser idvos pbalises si vous souhaitez l'isoler, bien qu'il soit préférable d'utiliser un divpour l'isolement, l'OMI.

Désolé si quelqu'un d'autre l'a déjà dit, mais la solution simple est de jouer avec votre "hauteur de ligne". Si vous obtenez trop d'espace lorsque vous utilisez un saut de ligne, c'est simplement parce que la hauteur de votre ligne est trop élevée. Vous pouvez corriger cela en CSS (mais sachez que cela affectera tout ce qui utilise cette propriété) ou vous pouvez faire un style en ligne pour remplacer le CSS.

J'ai dû développer une solution pour convertir le HTML en PDF et centrer verticalement le texte dans les cellules du tableau, mais rien n'a fonctionné, sauf la saisie en clair <br>

Donc, en dehors de la boîte, j'ai changé la taille verticale en ajustant la taille de la police (en pt).

<font style="font-size: 4pt"><br></font>

<span style="line-height:40px;"><br></span> 

Vous devriez le faire en ligne et sur chaque
élément, mais cela devrait fonctionner sur la plupart des navigateurs Fiddle avec la hauteur de ligne pour obtenir l'effet souhaité. Si vous le faites en ligne sur chaque élément, cela devrait fonctionner avec la plupart des navigateurs et des e-mails (mais c'est trop complexe pour en parler ici).

Cela a fait l'affaire pour moi lorsque je n'ai pas pu obtenir l'espacement de style à partir de la balise span:

        <p style='margin-bottom: 5px' >
            <span>I Agree</span>
        </p>
        <span>I Don't Agree</span>

Utilisation <div>

<div>Content 1</div>Content 2

Cela permet une nouvelle ligne sans espace vertical.

Cela devient

<div>Content 1</div>Content 2

Répondre à un niveau plus général pour tous ceux qui ont atterri ici car ils corrigent des problèmes d'espacement causés par la <br>balise. Je dois faire beaucoup de réinitialisations pour me rapprocher du pixel parfait.

br {
    content: " ";
    display: block;
}

Pour le problème spécifique que j'abordais, je devais avoir un espace spécifique entre les lignes. J'ai ajouté une marge en haut et en bas.

br {
    content: " ";
    display: block;
    margin: 0.25em 0;
}

Je l'ai fait fonctionner dans IE7 en utilisant un combo de solutions, mais en enveloppant principalement le Br dans DIV comme Nigel et d'autres l'ont suggéré. Ajout de l'ID et exécution sur = "serveur" afin que je puisse supprimer le BR lors de la suppression de la case à cocher de la ligne de cases à cocher.

.narrow {
    display: block;
    margin: 0px;
    line-height: 0px;
    content: " "; 
}

<div class="narrow" run at="server"><br></br></div>

L'utilisation de deux balises br est la solution la plus simple qui fonctionne avec tous les navigateurs. Mais c'est répétitif.

<p>
content
</p>
<br /><br />
<p>
content
</p>
<br /><br />
<p>
content
</p>

Que diriez-vous d'ajouter simplement un paragraphe au lieu du saut de ligne comme ça

bla la la bla bla abla la la bla bla abla la la bla bla a

Ensuite, vous pouvez spécifier la hauteur de ligne ou le remplissage ou quoi que ce soit pour cela p