css float 减少 freemarker 中的间距 - 在 xslt 中没有区别

Question

我必须将模板从 XSLT 更改为 Freemarker（最好不更改 CSS）。

我面临的问题是几乎每个元素都会占用额外的空间，这会破坏大部分布局（CSS 根本没有改变）。额外的空间在任何浏览器的开发工具中都不会显示为边距/填充/边框/定位。

我发现浮动元素会减少它们之间的空间，因此看起来就像使用 XSLT 一样，但这不是一个选项，因为实际上有几十个元素会受到影响。在所有种类和类型中，以下只是一个简单的示例。

XSLT/Freemarker 生成的代码是相同的，尽管 Freemarker 中存在换行符，而在 XSLT 中它全部在一行中（我希望这不会导致这样的问题）：

HTML：

<div class="stars text-center">
<i class="icon-star active" aria-hidden="true"></i>
<i class="icon-star active" aria-hidden="true"></i>
<i class="icon-star active" aria-hidden="true"></i>
<i class="icon-star active" aria-hidden="true"></i>
<i class="icon-star" aria-hidden="true"></i>
</div>

CSS：

尽管有明显的文本中心和设置颜色，但没有为图标或父级设置 CSS

结果：

顶部：Fr​​eemarker，底部：XSLT

Answer 1

您可以将compress 指令与single_line=true 一起使用。

<@compress single_line=true>
    <div class="stars text-center">
        <i class="icon-star active" aria-hidden="true"></i>
        <i class="icon-star active" aria-hidden="true"></i>
        <i class="icon-star active" aria-hidden="true"></i>
        <i class="icon-star active" aria-hidden="true"></i>
        <i class="icon-star" aria-hidden="true"></i>
    </div>
</@compress>

这将用空格字符替换换行符并生成以下 HTML：

<div class="stars text-center"> <i class="icon-star active" aria-hidden="true"></i> <i class="icon-star active" aria-hidden="true"></i> <i class="icon-star active" aria-hidden="true"></i> <i class="icon-star active" aria-hidden="true"></i> <i class="icon-star" aria-hidden="true"></i> </div>