html - CSS 三 Angular 形与 unicode 的浏览器渲染/定位差异

Question

我使用 display:flex 在容器内的一些文本旁边显示了一个三 Angular 形。文本的宽度在设计时是未知的。浏览器将在渲染时计算它所需的宽度。我在下面提供了突出显示我的场景的代码。

我遇到的问题:

• 在初始渲染时，.triangle-two 的位置未正确确定。浏览器似乎还不知道 .text 的宽度，所以它错误地定位了 .triangle-two 直到第二次渲染通过。渲染后片刻 .triangle-two 移动到正确位置。

相比之下，.triangle-one 根本没有出现这个问题。我认为这是因为 .triangle-one 呈现为文本，因此在与 .text 相同的传递中，其中 .triangle-two 在不同的时间点呈现，使其不符合正确定位的条件。

值得注意的是，如果我将 justify-content: flex-end 应用于 .container 那么这个问题就不会发生，因为 .triangle-two 位于第一个位置，然后是 .text。因此，如果转向另一个方向，这不是问题。

这是一个常见问题吗？有没有更优雅的解决方案？

注意:我无法用我提供的示例重现该问题，但我不确定原因。我相信这个例子突出了我的问题，但也许它也依赖于页面初始化。

* {
  box-sizing: border-box;
}
.container {
  height: 48px;
  display: flex;
  flex: 1;
  align-items: center;
  padding: 8px;
}
.text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.triangle-one {
  transform: scale(1, .5);
}
.triangle-two {
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid;
}

<div class='container'>
  <div class='text'>
    Dynamic text
  </div>
  <div class='triangle-one'>▼</div>
  <div class='triangle-two'></div>
</div>

Answer 1

第二天就想通了。

问题是我在初始加载时页面上没有文本，然后将一堆 View 附加到上面有文本的页面。我也在使用自定义字体。

由于初始加载时页面上没有文本 - 附加 View 时不会加载字体。因此，一旦字体加载导致其形状发生变化，文本就会四处移动。然后，它旁边的三 Angular 形需要重新定位。