ionic2 show whole text in list and navbar -
this image showing in news list, before can showing whole text, after add function button, cannot show whole text. using text-wrap news list can show whole text,but news content still cannot show whole text...like next image how!!!!!!!!!!!!!
this image showing in news details, , want show whole title here also, here can show title text 'newtitle...' dun want '...' want show whole title here
news.html
<ion-header> <ion-navbar color="danger" no-border-bottom> <button ion-button menutoggle> <ion-icon name="ios-contact"></ion-icon> </button> <ion-title>民安</ion-title> </ion-navbar> <!-- <ion-toolbar no-border-top color="danger"> <ion-searchbar [(ngmodel)]="myinput" [showcancelbutton]="shouldshowcancel" (ioninput)="oninput($event)" (ioncancel)="oncancel($event)" placeholder="搜索"> </ion-searchbar> </ion-toolbar> --> </ion-header> <ion-content padding> <ion-list no-lines> <ion-item> <ion-label fixed>新闻分类</ion-label> <ion-select (ionchange)="changecategory()" [(ngmodel)]="category" name="category"> <ion-option value="news">要闻</ion-option> <ion-option value="local">本地</ion-option> <ion-option value="policy">政策</ion-option> <ion-option value="activity">活动</ion-option> <ion-option value="volunteer">志愿者</ion-option> </ion-select> </ion-item> </ion-list> <ion-item-group *ngfor="let new of news"> <ion-thumbnail *ngif="new.preview_image1" item-start> <img src="{{new.preview_image1}}"> </ion-thumbnail> <ion-item (click)="gotonewsdetail(new)"> <h2>{{new.title}}</h2> <h2>{{new.publish_time}}</h2> <p> <ion-icon name="chatboxes">{{new.comments_count}}</ion-icon> </p> </ion-item> </ion-item-group> </ion-content> news.ts
import { component, } '@angular/core'; import { ionicpage, navcontroller, navparams } 'ionic-angular'; import { newsdataprovider } '../../providers/news-data/news-data'; import { newsdetailpage } '../news-detail/news-detail'; @ionicpage() @component({ selector: 'page-news', templateurl: 'news.html', }) export class newspage { news:any; category:any; limit:any; constructor(public navctrl: navcontroller, public navparams: navparams,public newsdata:newsdataprovider){ this.getnews(this.category,this.limit); this.getdefaults(); } getnews(category:any,limit:any) { this.newsdata.getnews().then(data => { this.news = data; }); } gotonewsdetail(newsitem:any) { this.navctrl.push(newsdetailpage,{ new:newsitem }); } getdefaults(){ this.category = 'news'; this.limit = 10; } changecategory(){ this.getnews(this.category,this.limit); } } news-detail.html
<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-title>{{new.title}}</ion-title> </ion-toolbar> </ion-header> <ion-content> <!-- {{new.title}}<br/> <br/> {{new.html_content}} --> <ion-card> <!-- <img src="{{new.preview_image1}}" onerror="this.src='assets/img/logo2.jpg'"/> 有图片显示图片，无图片显示指定路径图片（民安logo）--> <img *ngif=new.preview_image1 src="{{new.preview_image1}}"/> <ion-card-content> <ion-card-title> <!-- {{new.title}}<br/><br/> --> <ion-list> 新闻来源： <ion-note>{{new.news_source}}</ion-note> </ion-list> <br/> <ion-list> 发布时间： <ion-note>{{new.publish_time}}</ion-note> </ion-list> <br/> {{new.html_content}} </ion-card-title> </ion-card-content> </ion-card> </ion-content> news-detail.ts
import { component } '@angular/core'; import { ionicpage, navcontroller, navparams } 'ionic-angular'; import { newsdataprovider } '../../providers/news-data/news-data'; @ionicpage() @component({ selector: 'page-news-detail', templateurl: 'news-detail.html', }) export class newsdetailpage { new: any; constructor(public navctrl: navcontroller, public navparams: navparams,public newsdata:newsdataprovider) { this.new = navparams.get('new'); } }
you can use of predefined css utilities in ionic text data.
try using text-wrap equivalent setting white-space: nowrap in css.
<ion-title text-wrap>{{new.title}}</ion-title>
Comments
Post a Comment