离子 - 如何在离子标题中缠绕长字符串

这是我的代码，我试过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; 
}

来源

2017-08-14 Yuyang He

包括这么长的标题似乎是一个不好的设计......你为什么不包括那个长头衔作为一个头衔，但是在page_的_body中呢？ – sebaferreras

这一个为某人工作，不是由我自己设计。谢谢:) –

@sebaferreras你为什么认为这是糟糕的设计？我只需要在页面上处理这个问题，在那里我会显示联系人的详细信息。标题有联系人的全名，有些人的名字很长。将联系人全名作为页面标题是否是一个糟糕的设计？ –

PLS更新如下CSS文件：

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

编辑：

或者

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

来源

2017-08-14 09:27:49 Mankeomorakort

非常感谢你!!!这个为我工作！ –

谢谢..但为什么ios显示不好我的应用程序..我更新新代码和图像在我的问题 –

不知道为什么ios与android @Mankeomorakort不同 –

试试这个代码

<ion-header> 
    <ion-navbar color="danger"> 

    <button (tap)="Back()" ion-button menuToggle> 
     <ion-icon ios="ios-arrow-back" md="md-arrow-back"></ion-icon> 
    </button> 

    <ion-title>asdfasfasdf</ion-title> 

    </ion-navbar> 
</ion-header>

在你pagecomponent

Back(){ 
    this.navCtrl.pop(); 
}

来源

2017-08-14 09:06:36

离子 - 如何在离子标题中缠绕长字符串

回答

相关问题