ionic - 如何在离子头中对长字符串进行自动换行

Question

这是我的代码，我尝试了text-wrap，ion-header内仍然无法显示整个标题。

<ion-header>
  <ion-toolbar text-wrap color="danger">
    <ion-buttons>
        <button ion-button navPop icon-only>
            <ion-icon ios="ios-arrow-back" md="md-arrow-back"></ion-icon>
        </button>
    </ion-buttons>
    <ion-title>{{new.title}}</ion-title>
  </ion-toolbar>
</ion-header>

更新

<ion-header>
  <ion-toolbar color="danger">
    <ion-buttons>
        <button ion-button navPop icon-only>
            <ion-icon ios="ios-arrow-back" md="md-arrow-back"></ion-icon>
        </button>
    </ion-buttons>
    <ion-item color="danger" text-wrap>
     <ion-title >{{new.title}}</ion-title>
    </ion-item>
  </ion-toolbar>
</ion-header>

我尝试在那里添加ion-item，但仍然不适合我。

更新2

.ios .toolbar-title {
   text-overflow: inherit;
   white-space: normal;
   text-align: left;
   font-size:1.3em;
}

.md .toolbar-title {
   text-overflow: inherit;
   white-space: normal;
   text-align: left;
   font-size:1.3em;
}

Answer 1

请更新您的css文件，如下所示：

.toolbar-title {
   text-overflow: inherit;
   white-space: normal;
}

<强>编辑：

或者

.toolbar-title {
   text-overflow: unset;
   white-space: unset;
}

Answer 2

比Finesse的答案（针对Ionic 5）更加整洁：

<ion-title>
  <div class="ion-text-wrap">
    {{new.title}}
  </div>
</ion-title>

Answer 3

为您的内容<ion-title>添加一个额外的包装器以启用包装器：

<ion-title>
  <div style="white-space: normal;">
    {{new.title}}
  </div>
</ion-title>

此外，如果您希望标题在文本过多时扩展标题，请添加以下CSS代码：

ion-title {
  position: static;
}