ionic - 如何在 ion-header 中对长字符串进行自动换行

ionic - How to wordwrap a long string in ion-header(ionic - 如何在 ion-header 中对长字符串进行自动换行)

问题描述

这是我的代码，我试过 text-wrap ，里面 ion-header 仍然无法显示整个标题.

This is my code, and I tried text-wrap , inside ion-header still can not show whole title.

<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，但仍然不适合我.

I tried add ion-item there, but still not working for me.

更新 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;
}

推荐答案

请更新你的css文件如下:

Pls update your css file as below :

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

已

或者

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

这篇关于ionic - 如何在 ion-header 中对长字符串进行自动换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！