Keine Leerzeichen bei der HTML-Formatierung auf der Webseite darstellen

Question

Ich habe den folgenden Code, um einige Spans mit Hilfe von Cakephp's Helper zu generieren

<div id="numberRow">
    <?php echo $this->Paginator->numbers(array('class' => 'numbers', 'separator' => '', 'before' => '', 'after' => '', 'first' => 1, 'last' => 1)); ?>
</div>

Dies erzeugt den folgenden Code:

<div id="numberRow">
    <span class="current">1</span><span><a href="stackoverflow.com/posts/show/barter/page:2" class="numbers">2</a></span>
</div>

Das Problem ist, dass der Browser ein Leerzeichen nach der <span> was ich nicht will.

Meine bisherige Lösung ist, den Kuchen wie folgt zu schreiben:

<div id="numberRow">
            <span class="current">1</span><span><a href="stackoverflow.com/posts/show/barter/page:2" class="numbers">2</a></span></div>

mit dem schließenden Tag in der gleichen Zeile wie die <span> aber das unterbricht das Format und erschwert die Lesbarkeit des Quelltextes.

Gibt es einen besseren Weg?

Answer 1

Gute Nachrichten! Es gibt einen CSS-Stil, der genau dieses Problem lösen soll. Er heißt white-space-collapse und in Ihrem Stylesheet sieht es so aus:

#numberRow {white-space-collapse: discard;}

In Browsern, die dies unterstützen, führt dies zu Leerraum zwischen Tags innerhalb der <div> fallen gelassen werden, wenn sich keine anderen Personen in ihrer Nähe befinden.

Und nun die schlechte Nachricht: Es gibt noch keinen einzigen Browser, der dies unterstützt :(

Die sich schneller entwickelnden Browser werden es wahrscheinlich sehr bald unterstützen - ich würde darauf wetten, dass es mindestens bis zum Ende des Jahres in Chrome enthalten sein wird - aber das wird nicht genug Unterstützung sein, um es für einige Zeit nutzbar zu machen.

In der Zwischenzeit ist dies ein häufiges Problem, das viele Website-Designer plagt.

Die gängigste Lösung besteht darin, die Leerzeichen aus dem Quellcode zu entfernen, wie in dem Beispiel, das Sie in der Frage genannt haben. Es ist nicht ideal, aber es löst das Problem, und zwar ohne unschöne Hacks.

Wenn Sie fest entschlossen sind, Ihren Quellcode ordentlich zu halten (oder Sie können es aufgrund eines von Ihnen verwendeten Frameworks oder was auch immer nicht vermeiden), gibt es noch ein paar andere, etwas umständlichere Lösungen:

Die erste besteht darin, beim Laden der Seite eine Javascript-Zeichenfolgenersetzung zu verwenden, um die unerwünschten Leerzeichen zu entfernen. Das ist umständlich, funktioniert aber, außer in dem seltenen Fall, dass der Nutzer Javascript deaktiviert hat. Es kann zu Problemen bei der Seitenaktualisierung kommen, da die Seite zuerst mit dem einen Layout geladen wird und sich dann sofort wieder mit dem richtigen Layout synchronisiert, aber das wird wahrscheinlich minimal sein (abhängig von der Geschwindigkeit des Browsers und dem Ausmaß des Problems).

Eine noch chaotischere Lösung, aber zweifellos ein cleverer Hack, besteht darin, die font-size:0; für das übergeordnete Element (in Ihrem Fall das <div> ), und setzen Sie dann font-size auf die richtige Größe für die Inhaltselemente zurück. z.B:

#numberRow {font-size:0;}
#numberRow>span {font-size:12px;}

(natürlich anstelle von '12px' in der von Ihnen gewünschten Größe)

Die Nachteile sind: Erstens ist es ein furchtbarer Hack, zweitens ist es ein furchtbarer Hack und drittens kann es dazu führen, dass die Schriftgröße schwer zu kontrollieren ist, wenn Sie ein em-basiertes Größenlayout verwenden und keine festen Pixelgrößen. Aber es funktioniert.

Alles in allem empfehle ich, die einfache Lösung zu wählen und die Leerzeichen in Ihrem PHP-Code zu entfernen. Zumindest bis die richtige CSS-Lösung in den meisten Browsern vorhanden ist.

Ich hoffe, das hilft.

Answer 2

Könnten Sie das einfach tun?

<div id="numberRow"><?php echo $this->Paginator->numbers(array('class' => 'numbers', 'separator' => '', 'before' => '', 'after' => '', 'first' => 1, 'last' => 1)); ?></div>