ionic2は、リスト内のテキスト全体を表示し、缶は、テキスト全体を表示する前に、

Question

ニュース一覧に表示中の画像をナビゲーションバーが、私は機能ボタンを追加した後、それは全体のテキストを表示することはできません。 text-wrapを使ってニュース一覧を表示することはできますが、ニュースコンテンツはまだ全文を表示することはできません。次の画像ようにどうすればいいですか!!!!!!!!!!!!!

ニュースの詳細を示す。このイメージを、と私はそれがまた、ここで全体のタイトルを表示したいが、ここではタイトルのみテキストを表示することができます「newTitleの...」しかし、私焦げ茶色が欲しい「...」 希望それここに全体のタイトルを表示

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, } from '@angular/core'; 
import { IonicPage, NavController, NavParams } from 'ionic-angular'; 

import { NewsDataProvider } from '../../providers/news-data/news-data'; 
import { NewsDetailPage } from '../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); 
    } 

} 

ニュース-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> 

ニュース-detail.ts

import { Component } from '@angular/core'; 
import { IonicPage, NavController, NavParams } from 'ionic-angular'; 
import { NewsDataProvider } from '../../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'); 
    } 

} 

Answer 1

テキストデータのイオンで定義済みのCSS Utilitiesの一部を使用することができます。

text-wrapを使用してください。これは、white-space: nowrapをcssに設定するのと同じです。

<ion-title text-wrap>{{new.title}}</ion-title>