Ignorer <br> avec CSS?

Je travaille sur un site qui a des sauts de ligne insérés comme <br> dans certains titres. En supposant que je ne puisse pas modifier le code HTML source, y a-t-il un moyen avec CSS que je puisse ignorer ces pauses?

Je suis en train d'optimiser le site sur mobile, donc je n'ai pas vraiment envie d'utiliser JavaScript.

Avec css, vous pouvez "masquer" les balises br et elles n'auront aucun effet:

br {
    display: none;
}

Si vous ne voulez en cacher que dans un type de titre spécifique, rendez votre css plus spécifique.

h3 br {
    display: none;
}

Remarque: cette solution ne fonctionne que pour les navigateurs Webkit, qui appliquent de manière incorrecte des pseudo-éléments aux balises à fermeture automatique.

En complément des réponses ci-dessus, il convient de noter que dans certains cas, il faut insérer un espace au lieu de simplement ignorer <br> :

Par exemple, les réponses ci-dessus tourneront

Monday<br>05 August

à

Monday05 August

comme je l'avais vérifié en essayant de formater mon calendrier hebdomadaire des événements. Il est préférable d'insérer un espace après «lundi». Cela peut être fait facilement en insérant ce qui suit dans le CSS:

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

Cela fera

Monday<br>05 August

ressembler

Monday 05 August

Vous pouvez modifier l' contentattribut br:afterà ', 'si vous voulez séparer par des virgules, ou mettez tout ce que vous voulez dans ' 'pour en faire le delimiter! Au fait

Monday, 05 August

a l'air bien ;-)

Voir ici pour une référence.

Comme dans les réponses ci-dessus, si vous voulez le rendre spécifique à une balise, vous le pouvez. Comme si vous voulez que cette propriété fonctionne pour la balise <h3>, ajoutez simplement un h3chacun avant bretbr:after , par exemple.

Cela fonctionne le plus généralement pour une pseudo-étiquette.

Si vous ajoutez dans le style

br{
    display: none;
}

Ensuite, cela fonctionnera. Je ne sais pas si cela fonctionnera dans les anciennes versions d'IE.

Voici comment je fais:

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

Vous pouvez utiliser des spanéléments à la place de brsi vous voulez que la méthode des espaces blancs fonctionne, car elle dépend de pseudo-éléments qui ne sont "pas définis" pour les éléments remplacés.

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

Le saut de ligne est simplement obtenu en définissant l'élément span approprié sur display:block.

En utilisant des identifiants et / ou des classes dans votre balisage HTML, vous pouvez facilement cibler chaque élément ou combinaison d'éléments span par CSS ou utiliser des sélecteurs CSS comme nth-child() .

Ainsi, vous pouvez par exemple définir différents points d'arrêt en utilisant des requêtes multimédias pour une mise en page réactive.

Et vous pouvez également simplement ajouter / supprimer / basculer des classes par Javascript (jQuery).

L '«avantage» de cette méthode est sa robustesse - fonctionne dans tous les navigateurs prenant en charge les pseudo-éléments (voir: Puis-je utiliser - Contenu généré par CSS ).

En alternative, il est également possible d'ajouter un saut de ligne via des pseudo-éléments:

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

DEMO

Pour moi, ça ressemble mieux à ça:

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>

Pour cela, vous pouvez simplement faire comme ceci:

br{display: none;}

et s'il est à l'intérieur d'une balise PRE, alors vous pouvez et si vous voulez que la balise PRE se comporte comme un élément de bloc normal, vous pouvez utiliser ce CSS:

pre {white-space: normal;}

Ou vous pouvez suivre le style d' Aneesh Karthik C comme:

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

Je pense que tu l'as

Selon votre question, pour résoudre ce problème pour Firefox et Opera en utilisant l' approche Aneesh Karthik C , vous devez ajouter l'attribut "float" right ".

Vérifier la exemple ici. Ce CSS fonctionne dans Firefox (26.0), Opera (12.15), Chrome (32.0.1700) et Safari (7.0)

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

J'espère que cela répondra à votre question !!

Bien que cette question semble déjà avoir été résolue, la réponse acceptée n'a pas résolu le problème pour moi sur Firefox. Firefox (et peut-être IE, même si je ne l'ai pas essayé) saute les espaces lors de la lecture du contenu de la balise "content". Bien que je comprenne parfaitement pourquoi Mozilla ferait cela, cela apporte sa part de problèmes. La solution de contournement la plus simple que j'ai trouvée était d'utiliser des espaces incassables au lieu d'espaces réguliers, comme indiqué ci-dessous.

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

Jetez un œil .

Oui tu peux ignorer ça <br> . Vous en aurez peut-être besoin en particulier dans le cas d'une conception réactive où vous devez supprimer les pauses pour les appareils mobiles.

HTML

<h2>

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

</h2>

Exemple CSS pour mobile

/* Resize the browser window to check */

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

Découvrez ce Codepen:
https://codepen.io/fluidbrush/pen/pojGQyM

Vous pouvez simplement le convertir en commentaire.

Ou vous pouvez faire ceci:

br {
display: none;
}

Mais si vous ne le voulez pas, pourquoi le mettez-vous là?