用HTML缩小PHP后，CSS字间距属性不起作用

Question

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>

Answer 1

You need to add a single space character after the first div for word-spacing to work in your minified HTML. No need to alter the PHP.

Just use a CSS pseudo-element with an escaped Unicode sequence for the space.

.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>

</div>