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

我的文档中有以下内容:</ p>

</ p>





  .batman { 
word-spacing:100px;

}

。 蝙蝠侠&gt; div {
显示:inline-block;

-webkit-box-sizing:border-box;

-moz-box-sizing:border-box;

box-sizing: border-box;

} </ code> </ pre>

 &lt; div class =“batman”  &gt;

&lt; div&gt; hello&lt; / div&gt;

&lt; div&gt; world&lt; / div&gt;

&lt; / div&gt; </ code> </ pre>

</ div>

</ div>

现在,我通过以下php代码运行html以在输出之前缩小它:</ p>

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

... html转到这里。 ..

ob_end_flush();
</ code> </ pre>

将其返回给浏览器:</ p>

</ p> < div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”>

\ r
  .batman { 
word-spacing:100px;

}

.batman&gt; div {
显示:inline-block;

-webkit-box-sizing:border-box;

-moz-box-sizing:border-box;

box-sizing: border-box;

} </ code> </ pre>

 &lt; div class =“batman”  &GT;&LT; DIV&GT;你好&LT; / DIV&GT;&LT; DIV&GT;世界&LT; / DIV&GT;&LT; / DIV&GT; </代码> </ PRE>

</ DIV>

</ DIV> \ r

所以这就是问题:</ p>

当html在一行上时,字间距</ code> css消失了, 或者我应该说,忽略。</ p>

我的两个div与“你好”和“世界”之间没有100px的空间。</ p>

我怎么能 保留字间距</ code>,同时还能将代码保存在一行上,实际上是自己在一行上输入,还是通过缩小器运行?</ p>

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

条件:我这样做! 需要div是内联块。</ p>
</ div>

展开原文

原文

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>

doushou8730
doushou8730 是的,生病必须考虑更换缩放器
3 年多之前 回复
dougao9864
dougao9864 我认为你的minifier是无效的。它应该将它减少到一个空间,而不是删除元素之间的所有空格。</div><div>和</div><div>之间存在差异。如果任何元素包含在具有空格的元素中,则折叠空白也将是错误的:预先样式。
3 年多之前 回复
duanfen1312
duanfen1312 使用&nbsp;创建一个空白区域。->类似的东西:<divclass=“batman”><div>hello&nbsp;</div><div>world</div></div>
3 年多之前 回复
dounei9043
dounei9043 字间距适用于指定div中的句子。你将每个单词包装在它自己的div中。字间距不起作用。如果要使用字间距,则在处理HTML后,您的HTML应如下所示。<divclass=“batman”>helloworld</div>
3 年多之前 回复
douzai9405
douzai9405 这是因为当html被扁平化为一行时,实际上没有空间可供使用,尝试在第一个div的末尾或第二个div的开头添加一个空格
3 年多之前 回复

2个回答



请注意,这是一个hacky解决方案。 无论如何,你可以使用pesudo-element </ p>

</ p>





 。  batman div { 
display:inline-block;

}

\ batman div:first-child {
content:'';

padding-right :100px;

} </ code> </ pre>

 &lt; div class =“batman”&gt  ;&LT; DIV&GT;你好&LT; / DIV&GT;&LT; DIV&GT;世界&LT; / DIV&GT;&LT; / DIV&GT; </代码> </ PRE>

</ DIV>

</ DIV>

</ div>

展开原文

原文

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>



你需要在 word-spacing </ code>的第一个div之后添加一个空格字符才能在你的缩小版中工作 HTML。 无需更改PHP。</ p>

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

</ p> < div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”>

\ r
  .batman { 
word-spacing:100px;

}

.batman&gt; div {
display:inline-block;

box-sizing:border-box;

}

.batman&gt; div:first-child :: after {
content:“\ 00a0”;

} </ code> </ pre>

 &lt; div class =”batman“&gt;&lt; div&gt; hello&lt; / div&gt;&lt; div&gt; world&lt; / div&gt;&lt; / div&gt; </ code> </ pre> \  r 
</ div>

</ div>

</ div>

展开原文

原文

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>

dslfq06464
dslfq06464 我非常感谢你的帮助:)
3 年多之前 回复
douyinglan2599
douyinglan2599 在你的codepen上工作。 到目前为止,我用CSS尝试过的东西都没有用。 如果有突破,会告诉你。 实际上调整PHP可能更简单。
3 年多之前 回复
dongyu2300
dongyu2300 谢谢Michael。 它适用于MSIE 11,而Firefox 49和vivaldi 1.2则显示不同的行。 像这样:i.imgur.com/JQMkZ2F.jpg
3 年多之前 回复
dqrdlqpo775594
dqrdlqpo775594 目前在MS Edge上。 两行相同。 今天晚些时候会检查Chrome和FF。
3 年多之前 回复
dongqindan4406
dongqindan4406 看看这个:codepen.io/anon/pen/apozPX,每行的CSS是相同的,但第一行放在一行....需要它看起来就像第二行。
3 年多之前 回复
duanpacan2583
duanpacan2583 这是一个好主意,但我可能有不止一个子元素。 目前正试图对每个孩子应用“:after”,但在可见宽度上将该空间字面上设为0。 font-size 0? 负边际?...没有准确到达这里......如此接近:)
3 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问