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

【问题标题】：How to linebreak Tab Header text into 2 lines?如何将 Tab Header 文本换行成 2 行？
【发布时间】：2019-02-06 07:16:28
【问题描述】：

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

足球运动

我想像这样在 2 行中显示它：

足球

运动

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

这是我的代码：

LIVE DEMO

<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>

【问题讨论】：

标签： angular primeng

【解决方案1】：

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

<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"

【讨论】：