javascript - IDE 中的格式化会影响显示的 HTML Angular 6

Question

在 IDE 中格式化代码时，我遇到了影响显示的 HTML 的问题。这是example 。正如您所看到的，第二个 div 中的名称之间有空格。

问题是我希望我的代码的格式与 div 中 class="second" 的格式相同。但我不希望 HTML 中的名称之间有空格。据我所知，由于名称之间的换行符而出现空格。但是除了将所有代码放在一行之外，有没有办法不显示空格？

Answer 1

我感受到你的痛苦。我已经多次遇到这个问题了。

您可以通过设置 font-size: 0 来删除多余的空格。到.second样式，然后设置 font-size: 14px仅文本。

https://angular-ldbx8q.stackblitz.io

您必须将文本包装在 <span> 中应该可以正常格式化。

<div class="second">
    <span class="txt">Formatted code: </span>
    <ng-container *ngIf="isFirstNameAllowedToShow">
      <span class="txt">{{name1}}</span>
    </ng-container>
    <ng-container *ngIf="isSecondNameAllowedToShow">
      <span class="txt">{{name2}}</span>
    </ng-container>
    <ng-container *ngIf="isThirdNameAllowedToShow">
      <span class="txt">{{name3}}</span>
    </ng-container>
</div>

当我做菜单时，这种情况就会发生在我身上。