问题描述

我的 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 单独的 twig 文件来呈现每个 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 会在每个 libefore 显示一些非折叠空间，如下所示:

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.

所以底线是，我需要摆脱那些红点，但我不知道为什么或在哪里创建它们.如您所见，这两种情况之间的唯一区别是使用包含传递的参数集，但我看不出这会如何导致出现奇怪的字符.我已经尝试在任何地方使用 {% 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 之间呈现的隐形字符包括的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！