HTML / CSS - Meilleure pratique pour conserver les espaces blancs sur certains éléments?
Quelle est la manière la meilleure de conserver les espaces blancs en HTML? Nous avons beaucoup de pages qui font descendre des données de notre base de données, et les données peuvent avoir plusieurs espaces. Les éléments HTML rendus qui contiennent les données varient des balises d'ancrage (<a>), spans (<span>), table rows (<tr>, <td>, etc.
La chose la plus simple à faire en ce moment serait d'ajouter une classe css globale comme ceci:
body a, span, tr, td { white-space: pre; }
Je me demande s'il y a une meilleure façon d'implémenter cela sans assigner une classe à chaque élément HTML individuel.
J'utiliserais la même technique, mais à l'intérieur d'un wrapper de classe de données où cela est nécessaire:
.data a, .data span, .data tr, .data td { white-space: pre; }
HTML:
<div class="data">
....
</div>
<pre>no need for style</pre>
Quel est le problème avec le remplacement des espaces par nbsp ;? Cela devrait fonctionner à l'intérieur de n'importe quel élément et conserver les espaces dans la sortie rendue.
Cela dépend si vous souhaitez conserver tous les espaces blancs dans certains éléments et ce qui doit s'y produire exactement. En supposant qu'aucune règle CSS ne puisse interférer, votre CSS peut être simplifié pour
a, span, tr { white-space: pre; }
car un élément a est toujours dans body et td par défaut hérite de la propriété de tr.
Si vous souhaitez uniquement empêcher plusieurs espaces de s'effondrer, au lieu de forcer la division fixe en lignes, alors white-space: pre-wrap ou remplacer des espaces par des espaces sans interruption pourrait être plus adéquat.
Enfin, la nécessité et les possibilités de restreindre la règle aux éléments sélectionnés dépendent largement de la manière dont la sélection doit être effectuée. Vous pouvez peut-être définir de manière sélective white-space à pre (ou pre-wrap) à certains éléments qui entourent les parties pertinentes, en se souvenant que la propriété hérite si elle n'est pas définie sur les éléments internes.
Vous pouvez également rompre l'héritage: vous pouvez définir white-space: pre sur un élément table par exemple, si vous souhaitez appliquer la règle à la plupart du contenu, et définissez white-space: normal sur les lignes ou cellules où il ne doit pas être appliqué.