Javascript ngAfterCiewChecked clientHeight不使用换行符-角度2应用

我有一个Angular 2应用程序，在其中我成功地设置了一个功能页面

我用一个自制的游戏来欺骗它：

ngAfterViewChecked() { 
    var selector = document.querySelector('.read-grid');
    // The only reason i'm using numOfTimes is that ngAfterViewChecked is runned 4 times on each pageload. It's fine with only running gridify on the last and fourth time. 
    if (selector != null && this.numOfTimes == 4) { 
      this.gridify.createGrid(selector);
    }
    this.numOfTimes += 1;
  }

它几乎像它应该显示的那样：一个5列的网格视图。唯一的问题是，在一些标题较长的对象上，有一两个换行符，垂直空间（边距）缺失。如图所示：

如果我重新加载页面，对象将按应有的方式放置。如果在没有缓存的情况下重新加载，则问题再次出现

当Gridify放置对象时，它使用

.clientHeight

查找每个元素的top属性

我发现，如果我为每个元素的标题设置了一个自定义高度（例如20px），那么一切都正常工作

因此，我的结论是，第一次加载的

.clientHeight

设置了元素的高度，而没有考虑较长标题的换行符。这怎么可能

检查后是否有

ngAfterViewChecked

？是提前打电话还是我错过了什么

---

Safari、Chrome和Firefox中的字体都是一样的，所以看起来不像是浏览器问题。

我发现问题在于我用于标题的字体被称为late

我早期的字体是“Roboto”，但后来改为“Libre Baskeville”

“Libre Baskeville”字体比Roboto字体宽得多，因此标题中有一行打断了

。clientHeight

无法检测到，因为它根据第一种字体（称为“Libre Baskeville”）测量高度

当我将CSS更改为只有一个字体调用时，一切都正常工作