如何在文本之间添加水平线

Posted 2023-03-13

【中文标题】如何在文本之间添加水平线

【英文标题】：how to add horizontal line between text

【发布时间】：2021-02-07 12:31:33

【问题描述】：

现在晚上，我从后端收到了两条文本响应，我想知道如何才能使看起来像下面的设计。我不确定这是否可能，但任何建议或帮助将不胜感激。

如果有两个或多个广播，我只想自动添加一条水平线来分隔文本，而不是像现在这样显示在同一行（图片）。

    <mat-card class="alert" *ngIf="broadcastNotifications?.length">
      <mat-card-title *ngFor="let broadcast of broadcastNotifications">
          <p style="font-size: 15px; color: black; margin-top: 25px;">broadcast.message</p>
      </mat-card-title>
    </mat-card>

    this.notificationService.getNotification().subscribe((response: any) => 
      if(response && response.length)
        const alerts = response.filter(el => el.notificationType === 2);
        this.broadcastNotifications = response.filter(el => el.notificationType === 1);
        if(alerts.length)
          this.dialog.open(ReleaseDialogComponent, 
            data : notifications: alerts
          );
        
      
    )

现在的样子与我的想法。

[![在此处输入图片描述][1]][1]

【问题讨论】：

html <hr /> 显示一条水平线，这是一个起点

嗨，你能告诉我我应该放在哪里吗？谢谢

【参考方案1】：

您可以为此目的使用<mat-divider>。 将 for 循环移动到 ng-container 并为不是最后一个元素的所有元素添加 <mat-divider>。

<mat-card class="alert" *ngIf="broadcastNotifications?.length">
    <ng-container *ngFor="let broadcast of broadcastNotifications; let i = index">
        <mat-card-title>
            <p style="font-size: 15px; color: black; margin-top: 25px;">broadcast.message</p>
        </mat-card-title>
    <mat-divider *ngIf="broadcastNotifications.length - 1 !== i"></mat-divider>
    </ng-container>
</mat-card>

例子可以在here找到

【讨论】：

你也可以用