Modifier la hauteur de <br> à l'aide de CSS

Question

J'ai vu une question à ce sujet ici, mais je n'arrive pas à faire fonctionner aucune des réponses (du moins sur Chrome).

Cette question concerne uniquement, je connais de nombreuses autres techniques pour changer la hauteur mais dans ce cas je ne peux pas changer le HTML.

blablablabla

CSS:

br {
  display: block;
  margin-bottom: 2px;
  font-size:2px;
  line-height: 2px;
}

Effet souhaité : hauteur interligne plus petite.

La seule chose que je réussis à faire fonctionner est display:none, mais alors tous les sauts de ligne sont supprimés.

Voici un fiddle pour cela en utilisant certaines des techniques, mais vous verrez que cela rend exactement de la même manière que sans aucun CSS.

Answer 1

Cela semble très bricolé, mais dans chrome 41 sur ubuntu, je peux rendre unlégèrement stylable :

br {
  content: "";
  margin: 2em;
  display: block;
  font-size: 24%;
}

Je contrôle l'espacement avec la taille de la police.

---

Mise à jour

J'ai réalisé quelques cas de test pour voir comment la réponse change à mesure que les navigateurs se mettent à jour.

*{outline: 1px solid hotpink;}
div {
  display: inline-block;
  width: 10rem;
  margin-top: 0;
  vertical-align: top;
}

h2 {
  display: block;
  height: 3rem;
  margin-top:0;
}

.old br {
  content: "";
  margin: 2em;
  display: block;
  font-size: 24%;
  outline: red;
}

.just-font br {
  content: "";
  display: block;
  font-size: 200%;
}
.just-margin br {
  content: "";
  display: block;
  margin: 2em;
}

.brbr br {
  content: "";
  display: block;
  font-size: 100%;
  height: 1em;
  outline: red;
  display: block;
}

  Bruts brs
  blablablabla

  marge & taille de police
  blablablabla

  seulement la taille de police
  blablablabla

  seulement la marge
  blablablabla

  brautres vs seulement les brs
  blablablabla

Ils ont tous leur propre version de comportement étrange. Mis à part le navigateur par défaut, seul le dernier respecte la différence entre un et deux brs.

Answer 2

Vous ne pouvez pas changer la hauteur de la balise br elle-même, car ce n'est pas un élément qui prend de la place dans la page. C'est juste une instruction pour créer une nouvelle ligne.

Vous pouvez changer la hauteur de ligne en utilisant le style line-height. Cela modifiera la distance entre les blocs de texte que vous avez séparés par des lignes vides, mais naturellement aussi la distance entre les lignes dans un bloc de texte.

Pour compléter : Les blocs de texte en HTML sont généralement faits en utilisant la balise p autour des blocs de texte. De cette manière, vous pouvez contrôler la hauteur de ligne à l'intérieur de la balise p, ainsi que l'espacement entre les balises p.

Answer 3

Jetez un œil à la propriété line-height. Essayer de styliser la balisen'est pas la solution.

Exemple :

  Ce texte
   est
   simple-espacé.

  Ce texte
   est
   double-espacé.

Answer 4

Utilisez la propriété content et stylisez ce contenu. Le comportement du contenu est ensuite ajusté en utilisant des pseudo-éléments. Les pseudo-éléments ::before et ::after fonctionnent tous deux dans Mac Safari 10.0.3.

Ici, le contenu de l'élément br est utilisé comme l'ancre de l'élément br::after. L'élément br est l'endroit où l'espacement br peut être stylisé. br::after est l'endroit où le contenu de br::after peut être affiché et stylisé. Ça a l'air sympa, mais ce n'est pas un saut de ligne de 2px.

br { content: ""; display: block; margin: 1rem 0; }
br::after { content: "› "; /* content: " " espace ignoré */; float: left; margin-right: 0.5rem; }

La propriété line-height de l'élément br est ignorée. Si des valeurs négatives sont appliquées à l'un ou l'autre des sélecteurs, ou aux deux, pour donner un 'soulèvement' vertical aux balises br en affichage, alors un espacement vertical correct se produit, mais le contenu d'affichage est incrémentalement indenté après chaque balise br. L'indentation est exactement égale à la quantité que le soulèvement varie par rapport à la hauteur de ligne typographique réelle. Si vous devinez correctement le soulèvement, il n'y a pas d'indentation mais une seule ligne empilée exactement égale à la hauteur brute du glyphe, coincée entre les lignes précédentes et suivantes.

De plus, une balise br finale fera en sorte que la balise d'affichage html suivante hérite de la mise en forme du contenu de br:after. De plus, les pseudo-éléments font en sorte que

soit interprété comme un seul
. Alors que la pseudo-classe br:active fait en sorte que chaque
soit interprété séparément. Enfin, en utilisant br:active, les styles de tous les
ainsi que le pseudo-élément br:after sont ignorés. Donc, tout ce qui est requis est ceci:

br:active { }

ce qui n'aide pas à créer un affichage de
de 2px de hauteur. Et ici, la pseudo-classe :active est ignorée!

br:active { content: ""; display: block; margin: 1,25em 0; }
br { content: ""; display: block; margin: 1rem; }
br::after { content: "› "; /* content: " " espace ignoré */; float: left; margin-right: 0,5rem; }

Ceci est une solution partielle seulement. La pseudo-classe et le pseudo-élément peuvent fournir une solution, s'ils sont ajustés. Cela peut faire partie de la solution CSS. (Je n'ai que Safari, essayez dans d'autres navigateurs.)

Apprenez le développement web : pseudo-classes et pseudo-éléments

Prêtez attention aux éléments globaux - BR sur Mozilla.org

Answer 5

La hauteur de ligne de la balise br peut être différente de la hauteur de ligne du reste du texte à l'intérieur d'un paragraphe en définissant la taille de la police pour la balise br.

Exemple: br { font-size: 200%; }