Ini adalah kode saya, dan saya mencoba text-wrap , di dalam ion-header masih tidak dapat menampilkan seluruh judul.

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

enter image description here

Memperbarui

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

Saya mencoba menambahkan ion-item di sana, tetapi masih tidak berhasil untuk saya. masukkan deskripsi gambar di sini

10
Yuyang He 14 Agustus 2017, 11:52

3 jawaban

Jawaban Terbaik

Tolong perbarui file css Anda seperti di bawah ini:

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

Diedit:

Atau

.toolbar-title {
   text-overflow: unset;
   white-space: unset;
}
12
Mankeomorakort 14 Agustus 2017, 09:27

Sedikit lebih rapi daripada jawaban Finesse (untuk Ionic 5):

<ion-title>
  <div class="ion-text-wrap">
    {{new.title}}
  </div>
</ion-title>
3
AndrWeisR 15 Juni 2020, 00:06

Tambahkan pembungkus ekstra ke konten <ion-title> Anda untuk mengaktifkan pembungkus:

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

Selain itu, jika Anda ingin judul memperpanjang header saat terlalu banyak teks, tambahkan kode CSS berikut:

ion-title {
  position: static;
}
2
Finesse 28 Desember 2019, 08:58