PrimeNg p-timeline横向布局内容换行异常问题求助

我使用PrimeNG的p-timeline组件实现水平时间线，代码完全遵循官方文档：

<p-timeline [value]="events" layout="horizontal">
    <ng-template pTemplate="content" let-event>
        {{event.status}}
    </ng-template>
</p-timeline>

events: any[];

ngOnInit() {
  this.events = [
    {status: 'Processing complete', ...},
    {status: 'Processing complete', ...},
    {status: 'Processing complete', ...},
    {status: 'Processing complete', ...}
  ];
}

将该组件放入折叠面板（accordion）后，最后一个事件的内容始终显示为两行，增减事件数量也无法解决此问题。自定义CSS样式如下：

.custom-marker {
    display: flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    border-radius: 50%;
    z-index: 1;
}

问题原因 #

这是PrimeNG水平Timeline的常见布局问题，折叠面板属于动态容器，展开时的尺寸计算时机与Timeline的初始渲染不同步，导致最后一个内容项的宽度被错误压缩，进而触发换行。

解决方案 #

方案1：强制内容项不换行（快速修复）

通过CSS强制文本不换行，并禁止内容项被压缩：

.p-timeline-horizontal .p-timeline-event-content {
    white-space: nowrap;
    flex-shrink: 0;
}

若需要处理过长文本，可改为省略号显示：

.p-timeline-horizontal .p-timeline-event-content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
    min-width: max-content;
}

方案2：折叠面板展开后重新渲染Timeline

利用折叠面板的onOpen事件，手动触发Timeline的布局更新（需给Timeline添加模板引用变量）：

<p-accordion (onOpen)="refreshTimeline()">
    <p-accordionTab header="Timeline">
        <p-timeline #timeline [value]="events" layout="horizontal">
            <ng-template pTemplate="content" let-event>
                {{event.status}}
            </ng-template>
        </p-timeline>
    </p-accordionTab>
</p-accordion>

import { ViewChild } from '@angular/core';
import { Timeline } from 'primeng/timeline';

@ViewChild('timeline') timeline: Timeline;

refreshTimeline() {
    setTimeout(() => {
        this.timeline?.updateLayout();
    }, 100);
}

方案3：调整Timeline布局的flex分配

覆盖PrimeNG默认样式，让每个事件项均匀分配宽度：

.p-timeline-horizontal .p-timeline-events {
    flex-wrap: nowrap;
    justify-content: space-around;
}
.p-timeline-horizontal .p-timeline-event {
    flex: 1;
    display: flex;
    justify-content: center;
}

内容的提问来源于stack exchange，提问作者Tanzeel