0

I want the ion-title element to be able to display multiple lines, I've tried everything without any success. The white-space property doesn't seem to work

What would be the correct way to do this?

Here an example of what I'm trying https://stackblitz.com/edit/angular-uyq4qa?file=src%2Fapp%2Fexample.component.html

<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>
user60108
  • 3,270
  • 2
  • 27
  • 43
  • Why use ion-title for this? Why not simply use a DIV and style it the way you want? –  Mar 23 '23 at 09:48

1 Answers1

1

ion-title is not supposed to be used with long text. You should use the p or span tags and use css to style.

or use <ion-label> or <ion-text>

StackoverBlows
  • 473
  • 7