iOS Safari 在 iOS 16+ 上的 Flex 容器中过早换行，不低于

Question

我有一个基于 Flex 的按钮，带有一些文本和图标。在 iPhone 14 Pro Max 上，无论字体大小、字体类型和/或字数如何，单词都会过早换行。貌似只包含了最后一个字。此问题在 iOS 16+ 上出现，但在以下版本中不会出现。在 BrowserStack 中测试，无法弄清楚发生了什么。

iOS 16+：

iOS 15/以下版本：

按钮CSS

display: flex;
width: fit-content;
justify-content: center;
align-items: center;

我发现之前有一个帖子讨论了 Safari 错误包装 Inter 字体的问题，但无论我使用什么字体，这种情况似乎都会发生。

如果我调整图标大小，它将允许文本正确换行，但仅限于某些图标大小。

Answer 1

我遇到了同样的问题，过早换行与 iOS 版本有关。不过，我在移动设备和桌面设备之间确实有不同的行为。 在 Browserstack 的帮助下，我测试了几种不同的设备，以下是我的结果：

1. 好的

• Mac Ventura Safari：iOS v16.5
• iPhone 12 Pro：iOS v14
• iPhone 12：iOS v14

2. KO

• Mac 蒙特利 Safari：iOS v15.6
• iPhone 12 Mini：iOS v16
• iPhone 12 Pro：iOS v16

你能解决吗？谢谢！

Answer 2

要进一步研究这一点，请尝试在实际的物理设备上进行相同的测试。

此外，在本地 Appium 网格上运行此测试。

这将帮助您确定问题。

如果这些行为也相同，那么 iOS 16+ 可能会出现问题

谢谢。