我的 Twig include
遇到了一个奇怪的问题,它在我的 HTML 上渲染了一些不可见的字符。我尝试以一千种不同的方式进行谷歌搜索,但找不到任何有类似问题的人。事实上,我什至不确定它是否与 Twig 或 Symfony 或其他相关,所以我不确定我需要寻找什么。我会尝试一下
在我的一个 View 中的两个不同点,我使用 for
循环通过 include
单独的 twig 文件来渲染每个 li
,每次都有一组不同的参数。这两个循环是:
<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
明显相关的内容就是:
{% set role = common.roleClass(entity.type)|trim %}
<li class="{{ role }}">
// a bunch of html
</li>
但是,生成的代码在这两种情况下有一个奇怪的差异。在第一个中,所有 li
元素都生成得很好,一个接一个,它们之间只有一些空格,浏览器会忽略这些空格。但在第二个中,Chrome Web Inspector 在每个 li
之前显示一些非折叠空间,如下所示:
当右键单击其中一个空格并选择“编辑为 HTML”时,出现此红点:
该空间防止每个 li
的顶部和底部边距折叠(li
被渲染为一列框),因此创建了额外的空间,我不想要。我无法显示渲染列表的屏幕截图,所以我希望我提供了足够的信息。
所以底线是,我需要去掉那些红点,但我不知道它们为什么或在哪里创建。正如您所看到的,两种情况之间的唯一区别是通过包含传递的参数集,但我看不出这会如何导致出现奇怪的字符。我已经尝试在任何地方使用 {% spaceless %}
标签,并手动删除 twig 文件中的所有空格和换行符,但它们都不起作用。手动删除 Web 检查器中的红点会使 html 标签之间的所有空格再次折叠,但这当然不是一个选项。
最佳答案
这些症状表明您的文件包含 utf8 Byte Order Mark 。它呈现为不可见字符,并且可以轻松破坏 php 代码,建议您始终保存不带 BOM 的 utf8 文件 - 所有最新的编辑器都支持此功能。
关于html - Twig 之间渲染的隐形角色包括,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22444802/