Safari 16.3及以上版本whiteSpace: nowrap失效问题求助

问题场景 #

使用Material-UI的Box组件实现图标与文本同行展示，在Safari 14.1.1中whiteSpace="noWrap"可正常维持同行布局，但升级到Safari 16.3及以上版本后，图标会单独占一行，文本另起一行。原代码如下：

<Box
  fontWeight="bold"
  display="inline"
  component="span"
  whiteSpace="noWrap"
>
  {nodeImageUrl && (
    <img
      className={classes.nodeHightLightImage}
      alt="List description node"
      src={nodeImageUrl}
    />
  )}
  <Box component="span" whiteSpace="pre-wrap">
    {value}
  </Box>
</Box>

期望效果：图标与文本始终保持同行，同时文本内容过长时可正常换行。

问题原因 #

Safari 16.3+ 对inline元素的white-space处理逻辑做了调整，外层span设置noWrap后，内部包含pre-wrap的子元素会打破原有同行布局规则；另外img默认的inline-block特性在新版本渲染逻辑下更容易触发换行。

解决方案 #

改用flex布局替代inline+white-space的组合，既能强制图标与文本同行，又能保证文本正常换行：

<Box
  fontWeight="bold"
  display="inline-flex"
  alignItems="center"
  gap={1} // 可选：设置图标与文本的间距
>
  {nodeImageUrl && (
    <img
      className={classes.nodeHightLightImage}
      alt="List description node"
      src={nodeImageUrl}
      style={{ flexShrink: 0 }} // 防止图标被压缩变形
    />
  )}
  <Box component="span" whiteSpace="pre-wrap" style={{ flex: 1 }}>
    {value}
  </Box>
</Box>

关键调整说明： #

• 外层Box的display改为inline-flex，通过弹性布局强制子元素保持同行
• 增加alignItems="center"确保图标与文本垂直对齐
• 给img添加flexShrink: 0，避免文本过长时图标被挤压
• 文本容器设置flex: 1，让文本占据剩余空间并自动换行

效果验证 #

• 在Safari 14.1.1及16.3+版本中，图标与文本始终保持同行布局
• 文本内容过长时会自动换行，不会影响图标的位置与显示

内容的提问来源于stack exchange，提问作者Henok Tesfaye