CSS Wortabstand Eigenschaft funktioniert nicht nach HTML minimierte mit PHP

Question

Ich habe etwas Ähnliches wie die folgenden in meinem Dokument:

.batman { 
 
    word-spacing: 100px; 
 
} 
 
.batman > div { 
 
    display: inline-block; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
}

<div class="batman"> 
 
    <div>hello</div> 
 
    <div>world</div> 
 
</div>

Jetzt laufe ich die html durch die folgende pHP-Code minify es vor der Ausgabe:

ob_start(function($html) {return preg_replace('/>\s+</','><',$html);}); 

...html goes here... 

ob_end_flush(); 

welche, gibt diese an den Browser:

.batman { 
 
    word-spacing: 100px; 
 
} 
 
.batman > div { 
 
    display: inline-block; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
}

<div class="batman"><div>hello</div><div>world</div></div>

So, hier ist das Problem:

Wenn die HTML-Datei auf einer Linie ist, die word-spacing CSS weg ist, oder sollte ich sagen, ignoriert.

Es gibt keinen 100px Abstand zwischen meinen zwei Divs mit "Hallo" und "Welt".

Wie kann ich die word-spacing beibehalten und gleichzeitig den Code in einer Zeile halten, entweder selbst in einer Zeile eingeben oder durch einen Minifier?

Oder welche Änderung kann an meinem einfachen Minify-Skript vorgenommen werden, um sicherzustellen, word-spacing funktioniert immer noch.

Bedingungen: Ich tue! müssen die divs inline-block sein.

Answer 1

Sie müssen ein einzelnes Leerzeichen nach dem ersten Div für word-spacing hinzufügen, um in Ihrem minimierten HTML zu arbeiten. Keine Notwendigkeit, das PHP zu ändern.

Verwenden Sie einfach ein CSS-Pseudo-Element mit einer Escape-Unicode-Sequenz für den Raum.

.batman { 
 
    word-spacing: 100px; 
 
} 
 
.batman > div { 
 
    display:inline-block; 
 
    box-sizing: border-box; 
 
} 
 
.batman > div:first-child::after { 
 
    content: "\00a0"; 
 
}

<div class="batman"><div>hello</div><div>world</div></div>

Answer 2

Bitte beachten Sie, dass dies eine hacky Lösung. Wie auch immer, können Sie ein pesudo-Element verwenden

.batman div { 
 
    display: inline-block; 
 
} 
 

 
.batman div:first-child { 
 
    content: ''; 
 
    padding-right: 100px; 
 
}

<div class="batman"><div>hello</div><div>world</div></div>