在Twig之间渲染的不可见字符包括 [英] Invisible character rendered between Twig includes

问题描述

我在Twig include上遇到了一个奇怪的问题，该问题在我的HTML上呈现了一些不可见的字符.我曾尝试以一千种不同的方式谷歌搜索它，但找不到任何存在类似问题的人.实际上，我什至不知道它是否与Twig或Symfony或什么有关，所以我不确定我需要寻找什么.我会尝试的

I have a weird issue with a Twig include that's rendering some invisible character on my HTML. I've tried googling it in a thousand different ways, but couldn't find anyone with a similar issue. In fact, I'm not even sure if it's related to Twig or Symfony or what, so I'm not sure what I need to look for. I'll try m

在我的一个视图中的两个不同点，我使用for循环通过include渲染一个单独的小枝文件(每次带有一组不同的参数)来渲染每个li.这两个循环是:

At two different points in one of my views, I use a for loop to render each li by includeing a separate twig file, each time with a different set of arguments. The two loops are:

<ul class="search-results">
    {% for entity in entities %}
        {% include 'SomeBundle:Users:renderUserResults.html.twig' with {'entity':entity, 'callType':0} %}
    {% endfor %}
</ul>

和

<ul class="search-results">
    {% for entity in entities %}
        {% include 'SomeBundle:Users:renderUserResults.html.twig' with {'entity':entity, 'time_search':time_search, 'time_meeting_search':time_meeting_search} %}
    {% endfor %}
</ul>

renderUserResults.html.twig的明显相关内容只是:

The apparently relevant content of renderUserResults.html.twig is just:

{% set role = common.roleClass(entity.type)|trim %}
<li class="{{ role }}">
    // a bunch of html
</li>

---

但是，在两种情况下，生成的代码有一个怪异的区别.在第一个中，所有li元素都会很好地生成，一个又一个地生成，它们之间只有一些空格，浏览器会忽略它们.但是在第二篇中，Chrome Web Inspector在每个li的之前处显示了一些非折叠空间，如下所示:

---

However, the generated code has a weird difference between both cases. In the first one, all the li elements are generated just fine, one after another, with just some spaces between them that are ignored by the browser. But in the second one, the Chrome Web Inspector shows some non-collapsing space before every li, like this:

然后右键单击这些空格之一并选择以HTML格式编辑"，就会出现该红点:

And when right-clicking on one of those spaces and selecting "Edit as HTML", this red dot appears:

该空间可防止每个li的顶部和底部边距塌陷(li呈现为一列框)，因此会创建我不想要的额外空间.我无法显示渲染列表的屏幕截图，因此希望我提供了足够的信息.

That space is preventing the top and bottom margins of each li from collapsing (lis are rendered as a column of boxes), and therefore creating additional space which I don't want. I can't show a screenshot of the rendered list, so I hope I provided enough information.

因此，最重要的是，我需要摆脱那些红点，但是我不知道为什么或在何处创建它们.如您所见，这两种情况之间唯一的区别是通过include传递的参数集，但是我看不到这怎么可能导致出现一个奇怪的字符.我已经尝试过在所有地方使用{% spaceless %}标记，并且还手动删除了树枝文件中的所有空格和换行符，但是它们都不起作用.手动删除Web检查器中的红点会使html标记之间的所有空格再次折叠，但这当然不是一个选择.

So the bottom line is, I need to get rid of those red dots, but I have no idea why or where they are being created. As you can see, the only difference between the two cases is the set of parameters passed with the include, but I fail to see how that can cause a strange character to appear. I already tried using {% spaceless %} tags everywhere, and also manually deleting all spaces and line breaks in the twig files, but none of them worked. Manually deleting the red dots in the web inspector makes all the spaces between html tags to collapse again, but of course that's not an option.

推荐答案

这些是您的文件包含utf8的症状字节顺序标记.它呈现为不可见的字符，可以轻松破坏php代码，建议您始终保存不带BOM的utf8文件-所有最近的编辑器都支持此功能.

These are symptoms that your file contains an utf8 Byte Order Mark. It renders as an invisible character and can easily break php code, it is recommended you always save utf8 files without the BOM - all recent editors support this.

这篇关于在Twig之间渲染的不可见字符包括的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！