如何检测溢出

Question

我想检测溢出。

我想列出用户图像在一个单一行中，如果它溢出取决于设备的屏幕大小/屏幕方向的变化。

我试图做到这一点使用媒体查询，但没有luck.I现在用离子3

的.html：

<ion-row style="padding: 7px;" nowrap> 
    <ion-row style="overflow: hidden; height: 55px;"> 
     <ion-col col-auto *ngFor="let image of images"> 
      <img src="assets/images/image.png" /> 
     </ion-col> 
    </ion-row> 

    <ion-col *ngIf="showButton" col-auto align-self-center> 
    <img src="assets/images/more3.svg"> 
    </ion-col> 
</ion-row> 

.TS：

showButton = true; 

///// 
constructor(public navCtrl: NavController, 
      public modalCtrl: ModalController, 
      private postService: PostService, 
      private app: App, 
      private el: ElementRef){ 

    this.images = new Array(10); 
} 

当行不再溢出时，我试图隐藏按钮more编辑和项目适合屏幕，并显示它不是。

任何建议，感谢名单

Answer 1

好吧，我发现周围的工作，但它不是最好的解决办法

的.html：

/// 
<ion-row id="innerRow" style="overflow: hidden; height: 55px;"> //added id 
    <ion-col col-auto *ngFor="let image of images"> 
     <img src="assets/images/image.png" /> 
    </ion-col> 
</ion-row> 
//// 

.TS：

showButton = true; 

///// 
constructor(public navCtrl: NavController, 
     public modalCtrl: ModalController, 
     private postService: PostService, 
     private app: App, 
     private ngZone: NgZone){ 

    this.images = new Array(10); 

    window.onresize = (e) => {      // detect window resize 
    this.ngZone.run(() => { 
     let row = document.getElementById('innerRow'); 
      this.showButton = false;     // reset 
      if (this.isOverFlowed(row)){ 
       this.showButton = true; 
      } 
     }); 
    }; 
    } 
} 

ngAfterViewInit(){ 
    let row = document.getElementById('innerRow'); 
    if (this.isOverFlowed(row)){ 
     this.showButton = true; 
    } 
    } 

    isOverFlowed(element){ 
    return element.scrollHeight > element.clientHeight ||element.scrollWidth > element.clientWidth; 
    } 

我对任何改进此代码的建议持开放态度，thanx