Question

我的文档中有类似的内容：

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

现在，我通过以下php代码运行html以在输出之前缩小它：

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

...html goes here...

ob_end_flush();

，将其返回给浏览器：

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

所以这就是问题所在：

当html在一行上时，word-spacing css消失了，或者我应该说，忽略了。

我的两个div与“hello”和“world”之间没有100px的空间。

如何保留word-spacing同时还能将代码放在一行上，或者自己在一行上输入代码，或者通过缩小器运行代码？

或者可以对我的简单缩小脚本进行哪些更改，以确保word-spacing仍然有效。

条件：我做到了！需要div是内联块。

Answer 1

请注意，这是一个hacky解决方案。无论如何，你可以使用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>

Answer 2

您需要在word-spacing的第一个div之后添加一个空格字符才能在缩小的HTML中使用。无需改变PHP。

只需使用带有转义Unicode序列的CSS伪元素。

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

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

2 个答案: