dqhdpppm02183
dqhdpppm02183
2016-12-30 17:56

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

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>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

2条回答

  • duanke1984 duanke1984 5年前

    Please be aware that this is a hacky solution. Anyway, you can use a pesudo-element

    .batman div {
      display: inline-block;
    }
    
    .batman div:first-child {
      content: '';
      padding-right: 100px;
    }
    <div class="batman"><div>hello</div><div>world</div></div>

    </div>
    
    点赞 评论 复制链接分享
  • duanjian4331 duanjian4331 5年前

    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>
    
    点赞 评论 复制链接分享

相关推荐