web-dev-qa-db-de.com

HTML / CSS - Best Practice zur Beibehaltung des Leerraums bei bestimmten Elementen?

Was ist der beste Weg, um Leerraum in HTML zu erhalten? Es gibt viele Seiten, auf denen Daten aus unserer Datenbank abgelegt werden, und die Daten enthalten möglicherweise mehrere Leerzeichen. Die gerenderten HTML-Elemente, die die Daten enthalten, unterscheiden sich von den Ankertags (<a>), spans (<span>), table rows (<tr>, <td>, etc.

Am einfachsten wäre es, eine globale CSS-Klasse wie die folgende hinzuzufügen:

body a, span, tr, td { white-space: pre; }

Ich frage mich, ob es eine bessere Möglichkeit gibt, dies zu implementieren ohne jedem einzelnen HTML-Element eine Klasse zuzuweisen.

44
contactmatt

Ich würde die gleiche Technik verwenden, aber in einem Datenklassen-Wrapper, wo es benötigt wird:

.data a, .data span, .data tr, .data td { white-space: pre; }

HTML:

<div class="data">
....

</div>
<pre>no need for       style</pre>
21
LastTribunal

Was ist falsch daran, Leerzeichen durch nbsp zu ersetzen? Dies sollte in jedem Element funktionieren und die Leerzeichen in der gerenderten Ausgabe beibehalten.

7
Lars Hanke

Dies hängt davon ab, ob Sie alle Leerzeichen in bestimmten Elementen beibehalten möchten und was genau dort passieren soll. Angenommen, es gibt keine CSS-Regeln, die stören könnten, kann Ihr CSS vereinfacht werden

a, span, tr { white-space: pre; }

da ein a -Element immer in body und td enthalten ist, erbt die Eigenschaft standardmäßig von tr.

Wenn Sie nur verhindern möchten, dass mehrere Leerzeichen zusammenfallen, anstatt eine feste Unterteilung in Zeilen zu erzwingen, können Sie white-space: pre-wrap oder das Ersetzen von Leerzeichen durch Leerzeichen ohne Unterbrechung ist möglicherweise angemessener.

Schließlich hängen die Notwendigkeit und die Möglichkeiten zur Beschränkung der Regel auf ausgewählte Elemente stark davon ab, wie die Auswahl erfolgen soll. Vielleicht können Sie white-space bis pre (oder pre-wrap) für einige Elemente, die die relevanten Teile einschließen, wobei zu beachten ist, dass die Eigenschaft erbt, wenn sie nicht für innere Elemente festgelegt ist.

Sie können auch die Vererbung aufheben: Sie können white-space: pre für ein table -Element, wenn die Regel beispielsweise auf die meisten des Inhalts angewendet werden soll, und white-space: normal in den Zeilen oder Zellen, in denen es nicht angewendet werden soll.

7