html - Angular 10 - 防止回车在呈现为 HTML 的文本文字的开头和结尾添加空格

Question

我正在编写一个应用程序，其中间距在我正在渲染的某些文本的输出中至关重要。用户可以用鼠标突出显示文本，然后单击一个按钮来“标记”文本。然后，我稍后使用已标记的突出显示文本重新渲染输出。不过，我最近在执行此操作时注意到了一个问题，并且在查看呈现的 HTML 时，我可以看到该问题。

这段代码

<mat-card (mouseup)="mouseUp()" #card>{{article.text}}</mat-card>

在 HTML 中生成此结果

而这段代码

<mat-card (mouseup)="mouseUp()" #card>
    {{article.text}}
</mat-card>

在 HTML 中生成此结果

版本中文本文字的开头和结尾有一个空格，其中包含回车符，但是在尝试删除回车符时我遇到了一些问题。首先，我再次显示带有突出显示的文本的代码部分要复杂得多，因此我不能简单地更改回车符。它看起来像这样。

<mat-card class="te-card">
    <ng-container *ngFor="let textGroup of article.textSets; index as i; first as isFirst; last as isLast" >
        <ng-container *ngIf="isFirst || article.textSets[i].rangeStart > article.textSets[i - 1].rangeEnd">
            {{article.text.substring(i === 0 ? 0 : article.textSets[i - 1].rangeEnd, article.textSets[i].rangeStart)}}
            <div class="grouped-text-tab">
                <span [ngClass]="{ 'contributed': markExistsForUserAndType(article.textSets[i].textSetId, 'one')}">1 ({{(article.textSets[i].markMetrics || {"oneCount": 0}).oneCount}})</span> | 
                <span [ngClass]="{ 'contributed': markExistsForUserAndType(article.textSets[i].textSetId, 'two')}">2 ({{(article.textSets[i].markMetrics || {"twoCount": 0}).twoCount}})</span> | 
                <span [ngClass]="{ 'contributed': markExistsForUserAndType(article.textSets[i].textSetId, 'three')}">3 ({{(article.textSets[i].markMetrics || {"threeCount": 0}).threeCount}})</span>
            </div>
            <span class="claim grouped-text" [matMenuTriggerFor]="contribute" [matMenuTriggerData]="{textSetId: article.textSets[i].textSetId}" (click)="setActiveGroupIndex(i)">
                {{article.text.substring(article.textSets[i].rangeStart, article.textSets[i].rangeEnd)}}
            </span>
            <ng-container *ngIf="isLast">
                {{article.text.substring(article.textSets[i].rangeEnd, article.text.length)}}
            </ng-container>
        </ng-container>
    </ng-container>
</mat-card>

为了格式化我的代码以删除回车符，我必须在开头或结尾添加不需要的空格，我必须将这个结构良好的代码变成可读性较差的代码，如下所示。请注意，grouped-text-tab div 已向上移动到上一行的末尾。（仅供参考：grouped-text-tab 中的所有内容都不包含对此问题敏感的内容，因为我不会突出显示任何该文本，因此该 div 内的回车保持不变）：

<mat-card class="te-card">
    <ng-container *ngFor="let textGroup of article.textSets; index as i; first as isFirst; last as isLast" >
        <ng-container *ngIf="isFirst || article.textSets[i].rangeStart > article.textSets[i - 1].rangeEnd">{{article.text.substring(i === 0 ? 0 : article.textSets[i - 1].rangeEnd, article.textSets[i].rangeStart)}}<div class="grouped-text-tab">
                <span [ngClass]="{ 'contributed': markExistsForUserAndType(article.textSets[i].textSetId, 'one')}">1 ({{(article.textSets[i].markMetrics || {"oneCount": 0}).oneCount}})</span> | 
                <span [ngClass]="{ 'contributed': markExistsForUserAndType(article.textSets[i].textSetId, 'two')}">2 ({{(article.textSets[i].markMetrics || {"twoCount": 0}).twoCount}})</span> | 
                <span [ngClass]="{ 'contributed': markExistsForUserAndType(article.textSets[i].textSetId, 'three')}">3 ({{(article.textSets[i].markMetrics || {"threeCount": 0}).threeCount}})</span>
            </div>
            <span class="claim grouped-text" [matMenuTriggerFor]="contribute" [matMenuTriggerData]="{textSetId: article.textSets[i].textSetId}" (click)="setActiveGroupIndex(i)">{{article.text.substring(article.textSets[i].rangeStart, article.textSets[i].rangeEnd)}}</span>
            <ng-container *ngIf="isLast">{{article.text.substring(article.textSets[i].rangeEnd, article.text.length)}}</ng-container>
        </ng-container>
    </ng-container>
</mat-card>

但这甚至不是我看到的最大问题，因为如果有人告诉他们的代码编辑器自动格式化代码，功能实际上会中断。我真的认为这是最大的问题。功能实际上取决于代码布局。

所以，我想找到一种更清洁的方法来做到这一点。我在标题和关键字中标记 Angular 的原因是，虽然这是一个 HTML 问题，但如果我没有 Angular 参与混合<pre></pre>可能是一个好的解决方案。但是，由于我的第二个示例的复杂性和 Angular 的混合，我不能真正使用它作为一个选项。

我还尝试在 mat-card 元素上使用以下 CSS 指令，但无济于事。

whitespace: pre;
whitespace: pre-wrap;
whitespace: pre-line;

标签： htmlangular