I have something similar to the following in my document:
.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>
Now, I run the html through the following php code to minify it before output:
ob_start(function($html) {return preg_replace('/>\s+</','><',$html);});
...html goes here...
ob_end_flush();
which, returns this to the 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 here is the problem:
When the html is on one line, the word-spacing
css is gone, or should I say, ignored.
There is no 100px space between my two div's with "hello" and "world".
How can I preserve the word-spacing
while also being able to keep code on one line, either actually typing it on one line myself, or running it through a minifier?
Or what change can be done to my simple minify script to make sure word-spacing
still works.
Conditions: I do! need the divs to be inline-block.
</div>