如何檢測溢出

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