本文介绍了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 中对长字符串进行自动换行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！