Ignorer <br> avec CSS?

Question

Im travaillant sur un site qui a des sauts de ligne insérés en tant que < br> dans certaines rubriques. En supposant que je ne peux pas modifier le source html, il est un moyen en CSS je peux ignorer ces pauses?

Im mobile d'optimiser le site, donc je n'ai pas vraiment envie d'utiliser le javascript.

Answer 1

Avec css, vous pouvez les "cacher" les balises br et ils n'auront pas un effet:

br {
    display: none;
}

Si vous ne souhaitez masquer certains, dans une rubrique spécifique de type, il suffit de faire votre css plus spécifiques.

h3 br {
    display: none;
}

Answer 2

Comme un additif réponses ci-dessus, il est intéressant de noter que dans certains cas on a besoin pour insérer un espace, au lieu de simplement ignorer <br>:

Par exemple, les réponses ci-dessus va tourner

Monday<br>05 August

pour

Monday05 August

comme je l'avais vérifié alors j'ai essayé de formater mon hebdomadaire calendrier des événements. Un espace après "lundi" est préféré à insérer. Cela peut être fait facilement par l'insertion, dans le CSS:

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

Cela va faire

Monday<br>05 August

ressembler

Monday 05 August

Vous pouvez modifier l' content d'attribut en br:after de ', ' si vous souhaitez séparer par des virgules, ou mettez tout ce que vous voulez, dans ' ' pour en faire le délimiteur! Par la façon dont

Monday, 05 August

l'air soigné ;-)

Voir ici pour référence.

Comme dans les réponses ci-dessus, si vous voulez vous rendre balise spécifique, vous pouvez. Que si vous voulez que cette propriété à travailler pour la balise <h3>, il suffit d'ajouter un h3 chacun avant d' br et br:after, par exemple.

Il fonctionne plus généralement, pour un pseudo-balise.

Answer 3

Si vous ajoutez dans le style

br{
    display: none;
}

Puis ce sera le travail. Vous ne savez pas si il fonctionnera dans les anciennes versions d'IE.

Answer 4

Vous pouvez utiliser span éléments au lieu de l' br si vous voulez de l'espace blanc de la méthode de travail, car elle repose sur les pseudo-éléments qui sont "non défini" pour remplacer des éléments.

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

DÉMO

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

Par l'utilisation d'Identifiants et/ ou Classes dans votre balisage HTML, vous pouvez facilement cibler chaque unique ou d'une combinaison d'éléments span par CSS ou utiliser les sélecteurs CSS, comme nth-child().

Ainsi vous pouvez par exemple définir les différents points de rupture en utilisant les media queries pour un réactif de mise en page.

Et vous pouvez aussi tout simplement ajouter/ supprimer/ toggle classes en Javascript (jQuery).

Les "avantages" de cette méthode est sa robustesse - fonctionne dans tous les navigateur qui prend en charge les pseudo-éléments (voir: puis-je utiliser - CSS de contenu Généré).

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

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

DÉMO

Answer 5

Pour ça, tu peux faire comme ceci:

br{display: none;}

et si c'est à l'intérieur de certaines PRÉ balise, puis vous le pouvez et si vous voulez le PRÉ balise à se comporter comme un élément de bloc, vous pouvez utiliser ce CSS :

pre {white-space: normal;}

Ou vous pouvez suivre le style de Aneesh Karthik C comme :

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

Je pense que vous l'avez obtenu