Laravel Blade 在最终 HTML 中添加了不需要的空格答案

【问题标题】：Laravel Blade adds unwanted spaces in final HTMLLaravel Blade 在最终 HTML 中添加了不需要的空格
【发布时间】：2021-07-05 18:20:58
【问题描述】：

我在 Laravel Blade 中开发视图，我总是在最终的 HTML 中出现不需要的空格（使用开发工具检查），就像这样（丑陋的情况）：

你会看到很多不需要的空格，代码很简单：

<!-- Ugly -->  
<div>
  Lorem ipsum
  <div>
    Lorem ipsum
  </div>
</div>

显然，我已在 IDE 中将制表设置为空格。

我尝试以多种方式删除它们，唯一可行的方法是将所有内容内联：

<!-- Beautiful (but I can't do this for all!) -->
<div>Lorem ipsum<div>Lorem ipsum</div></div>

但很多时候我做不到。

如何避免所有这些空格？

编辑：这似乎发生在 Chrome 中，而不是 Firefox

【问题讨论】：

代码中必须有空格。在您的main.blade.php 或您的扩展视图中。请也检查一下。
@HassaanAli 没有！
您向我们展示的 HTML 的第一个 sn-p 清楚地在文本周围有空格......当您发现自己时，删除它们会删除空格。空格是否显示在浏览器中，还是仅显示在源中？ Devtools 不一定会完全按照它们在源中显示的内容呈现 - 您是否也检查了源？
尝试在您的内容周围使用 span 标签，否则您将无法使用它...或者您也可以搜索一个可以帮助您使用标签和双空格的包缓存的视图...
来自 devtools - devtools 的屏幕截图并不能准确反映源代码的外观。如果您对此感到担心，请参阅源代码，而不是 devtools。 Blade 模板中的空格都在 HTML 中结束，所以如果你很好地缩进了 <section> 和嵌套的 @include，那么缩进就在你的源代码中。同样对于所有 Blade 指令，@if、@foreach 等 - 用于格式化您的代码的空格最终会错误地格式化您的 HTML 源代码。您可以删除代码中的格式，但这是一个糟糕的权衡。更大的问题是为什么要担心它？ :-)

【解决方案1】：

我也注意到了这一点。刀片指令和输出格式/空白之间存在交互。

我认为发生了什么是呈现的 php 中的断点发生在刀片指令的行位置。我认为这实际上是所需的行为，因为如果我使用 <?php ?> 中断代替刀片指令，我注意到的行为是相同的。

我解决这个 pre-laravel 的方法是将 <?php ?> 中断归零，这有效地将 <?php ?> 大括号中生成的内容的缩进归零。这很好用，并且是我发现从代码可读性角度精确控制输出空白的最合乎逻辑的方式（虽然并不完美！）。

blade-land 中的等价物似乎对刀片指令执行相同的操作，即。将它们放在零位置的新行上。这看起来有点令人讨厌（就像常规的<?php ?> 中断一样），但这是我发现控制输出的唯一方法（我仍然发现常规 php 比刀片指令更容易阅读和更快地输入在大多数情况下，您不需要 $loop 之类的功能。

【讨论】：