如何配置ion-title元素使其支持多行文本显示？

我希望ion-title元素能够显示多行文本，但尝试多种方法均未成功，white-space属性似乎无法生效。我的尝试代码如下：

<ion-header translucent="true" class="ion-no-border">
  <ion-toolbar color="">
    <ion-buttons slot="primary" class="ion-button">
      <ion-button>
        <ion-icon slot="icon-only" name="contrast"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">
        Long text with multiple lines, Lorem ipsum dolor sit amet, consectetur
        adipiscing elit. In ac felis velit. Nulla accumsan velit ipsum, tempus
        euismod orci porta a. Ut lacus augue, sodales at auctor sed, vulputate
        et tellus.
      </ion-title>
    </ion-toolbar>
  </ion-header>

  <div class="ion-padding">Scroll the list to see the title collapse.</div>

  ...
</ion-content>

解决方案 #

Ionic的ion-title组件默认强制单行显示（通过内置的white-space: nowrap和text-overflow: ellipsis样式），普通的white-space设置会被组件内部的高优先级样式覆盖。要实现多行显示，需要针对组件内部的文本容器设置样式：

方法1：使用CSS部件选择器（Ionic 6+推荐） #

在组件的CSS文件中添加以下样式：

ion-title::part(text) {
  white-space: pre-line;
  text-overflow: unset;
  overflow: visible;
}

• ::part(text)是Ionic组件暴露的官方CSS部件，用来精准定位标题的文本容器；
• white-space: pre-line会保留文本中的换行符，并自动换行超出容器的内容；
• 取消text-overflow: ellipsis和overflow: hidden，避免文本被截断。

方法2：针对特定标题生效 #

如果只需要让某个ion-title显示多行，可以给它添加自定义类名：

<ion-title size="large" class="multi-line-title">
  你的多行标题内容
</ion-title>

然后在CSS中：

.multi-line-title::part(text) {
  white-space: pre-line;
  text-overflow: unset;
  overflow: visible;
  line-height: 1.4; /* 可选：调整行高优化可读性 */
}

兼容旧版本Ionic（5及以下） #

如果使用Ionic 5或更早版本，需要用::ng-deep穿透样式（Angular环境）：

::ng-deep ion-title {
  white-space: pre-line !important;
  text-overflow: unset !important;
  overflow: visible !important;
}

额外注意 #

• 不要给ion-title设置固定高度，或者确保高度足够容纳多行文本，避免内容被裁剪；
• 如果是折叠式标题（如示例中的collapse="condense"），需要同时处理折叠状态下的样式，避免折叠后显示异常。

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