如何将 Tab Header 文本换行成 2 行？

Question

我有这些标签，我希望能够分解文本。例如，而不是显示

Soccer sport

我想分两行显示：

Soccer

sport

有谁知道如何做到这一点？

这是我的代码：

<p-tabView>
  <p-tabPanel header="Soccer sport">
    The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. 
  </p-tabPanel>
  <p-tabPanel header="Football sport">
    Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, The_Godfather parallels the young Vito
    grows.
  </p-tabPanel>
</p-tabView>

Answer 1

目前的 primeng 版本似乎无法做到这一点。使用最新版本 7.0.5，您可以为 header 提供模板。您可以使用：

<p-tabView>
<p-tabPanel>
<ng-template pTemplate="header">Soccer<br>sport</ng-template>
    The story begins as Don Vito Corleone, the head of a New York Mafia family, overseeshis daughter's wedding. 
</p-tabPanel>
<p-tabPanel>
<ng-template pTemplate="header">Football<br>sport</ng-template>
    Francis Ford Coppola's legendary continuation and sequel to his landmark 1972 film, The_Godfather parallels the young Vito
    grows.
</p-tabPanel>

请参阅 modified stackblitz 观看现场演示。

仅供参考：如果您想更新它，显然您还需要在 package.json

中添加 "@angular/cdk": "^7.3.1"

如何将 Tab Header 文本换行成 2 行？

How to linebreak Tab Header text into 2 lines?

primeng

angular