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

Posted 2023-02-16

【中文标题】css float 减少 freemarker 中的间距 - 在 xslt 中没有区别

【英文标题】：css float reduces spacing in freemarker - in xslt no difference

【发布时间】：2021-02-21 10:39:08

【问题描述】：

我必须将模板从 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

【问题讨论】：

"全部在一行中（我希望不会引起这样的问题）："不，就是这样。 Freemarker 中星星之间的间隔是换行符，在渲染时会转换为空格字符。

【参考方案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>

【讨论】：

非常感谢您的回答和@alohci 的评论帮助我找到并解决了问题。你帮了我很多！

我也推荐这个答案：***.com/a/21104335/4359914