删除多个无线框之间的空白

Question

我在twig页面中添加了如下多个无线框：

      <div class="cc-selector">
        <input id="avatar-1" type="radio" name="avatar" value="1" />
        <label class="drinkcard-cc avatar-1" for="avatar-1"></label>
        <input id="avatar-2" type="radio" name="avatar" value="2" />
        <label class="drinkcard-cc avatar-2" for="avatar-2"></label>
        <input id="avatar-3" type="radio" name="avatar" value="3" />
        <label class="drinkcard-cc avatar-3" for="avatar-3"></label>
        <input id="avatar-4" type="radio" name="avatar" value="4" />
        <label class="drinkcard-cc avatar-4" for="avatar-4"></label>
        <input id="avatar-5" type="radio" name="avatar" value="5" />
        <label class="drinkcard-cc avatar-5" for="avatar-5"></label>
        <input id="avatar-6" type="radio" name="avatar" value="6" />
        <label class="drinkcard-cc avatar-6" for="avatar-6"></label>
      </div>

在输出中，见whitespace

​

​

如何删除whitespace模板中的twig？！

Answer 1

您可以使用无空间滤波器。它将做您想做的事情:只删除元素之间的空白(将这些元素保存在元素中)。

在Twig中使用这个：

{% apply spaceless %}
    <div class="cc-selector">
        <input id="avatar-1" type="radio" name="avatar" value="1" />
        <label class="drinkcard-cc avatar-1" for="avatar-1"></label>
        <input id="avatar-2" type="radio" name="avatar" value="2" />
        <label class="drinkcard-cc avatar-2" for="avatar-2"></label>
        <input id="avatar-3" type="radio" name="avatar" value="3" />
        <label class="drinkcard-cc avatar-3" for="avatar-3"></label>
        <input id="avatar-4" type="radio" name="avatar" value="4" />
        <label class="drinkcard-cc avatar-4" for="avatar-4"></label>
        <input id="avatar-5" type="radio" name="avatar" value="5" />
        <label class="drinkcard-cc avatar-5" for="avatar-5"></label>
        <input id="avatar-6" type="radio" name="avatar" value="6" />
        <label class="drinkcard-cc avatar-6" for="avatar-6"></label>
    </div>
{% endapply %}

将给出这个HTML：

<div class="cc-selector"><input id="avatar-1" type="radio" name="avatar" value="1" /><label class="drinkcard-cc avatar-1" for="avatar-1"></label><input id="avatar-2" type="radio" name="avatar" value="2" /><label class="drinkcard-cc avatar-2" for="avatar-2"></label><input id="avatar-3" type="radio" name="avatar" value="3" /><label class="drinkcard-cc avatar-3" for="avatar-3"></label><input id="avatar-4" type="radio" name="avatar" value="4" /><label class="drinkcard-cc avatar-4" for="avatar-4"></label><input id="avatar-5" type="radio" name="avatar" value="5" /><label class="drinkcard-cc avatar-5" for="avatar-5"></label><input id="avatar-6" type="radio" name="avatar" value="6" /><label class="drinkcard-cc avatar-6" for="avatar-6"></label></div>

Answer 2

由于模板的内容是HTML，我建议您使用SeeoX的方法。

但我决定提及另一个选项，即将模板的内容分配给变量，并应用筛选器，这有时会很有用：

{% set contents %}
    {% include ('cc-selector.twig') %}
{% endset %}

contents spaceless:
{{ contents | spaceless }}

replace only new lines:
{{ contents | replace({"\n": ""}) | raw }}

工作实例

Answer 3

这可能是因为输入和标签之间的断线。删除该空间可能/不会有帮助，但请尝试。

​

<div class="cc-selector">
        <input id="avatar-1" type="radio" name="avatar" value="1" /><label class="drinkcard-cc avatar-1" for="avatar-1"></label><input id="avatar-2" type="radio" name="avatar" value="2" /><label class="drinkcard-cc avatar-2" for="avatar-2"></label><input id="avatar-3" type="radio" name="avatar" value="3" /><label class="drinkcard-cc avatar-3" for="avatar-3"></label><input id="avatar-4" type="radio" name="avatar" value="4" /><label class="drinkcard-cc avatar-4" for="avatar-4"></label><input id="avatar-5" type="radio" name="avatar" value="5" /><label class="drinkcard-cc avatar-5" for="avatar-5"></label><input id="avatar-6" type="radio" name="avatar" value="6" /><label class="drinkcard-cc avatar-6" for="avatar-6"></label>
</div>

​