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

您可以在Ionic中使用一些预定义的CSS Utilities来获取文本数据。

尝试使用text-wrap，这相当于在css中设置white-space: nowrap。

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

ionic2在列表和导航栏中显示整个文本

1 个答案: