菜单项换行CSS在Chrome、火狐正常但Safari失效原因及适配方法

现有实现现象 #

• 需求：实现菜单项长文本的双行展示效果，要求第二行文本从第一个单词结束的位置开始排列
• 现有实现思路：为菜单项设置定宽与white-space: normal允许换行，通过:first-line伪元素设置word-spacing拉开首行词间距，以此触发文本在指定宽度位置换行
• 兼容表现：Chrome、Firefox中效果符合预期，Safari中伪元素样式完全失效，文本无预期换行效果

复现代码 #

.menu {
  max-width: 1200px;
  display: flex;
  justify-content: space-between;
  margin: 30px auto;
  list-style: none;
}
.menu-item {
  width:  calc(100% / 5);
  white-space: normal;
}
.menu-item:first-line {
  word-spacing: 200px;
  color: red;
}

WebKit（Safari内核）对:first-line伪元素的渲染逻辑存在明确边界：

1. :first-line伪元素仅能匹配独立块级容器内部的首行文本，当元素作为flex/grid布局的直接子项时，Safari会将元素内部的纯文本识别为匿名flex item，而非块容器内的常规文本流，此时:first-line选择器根本无法匹配到对应的渲染节点，所有设置在伪元素上的样式都不会生效。
2. 即使通过强制覆盖display属性让元素回到块级渲染，Safari对:first-line上设置的word-spacing这类影响排版的属性，也存在长期未修复的实现bug，无法将属性值应用到实际文本流中。

• 方案1（推荐）：嵌套文本容器隔离排版上下文
  不直接在flex子项上应用:first-line样式，在flex子项内部嵌套一层纯块级元素包裹文本，将首行样式移到这层内层容器上。内层元素不属于flex布局的直接子项，会被Safari识别为独立块级容器，伪元素可以正常匹配生效。
  对应代码：

  <li class="menu-item">
    <span class="menu-text">需要换行展示的长文本菜单内容</span>
  </li>
  

  .menu-text {
    display: block;
    width: 100%;
    white-space: normal;
  }
  .menu-text:first-line {
    word-spacing: 200px;
    color: red;
  }
  

• 方案2：脱离伪元素依赖，通过结构化缩进实现效果
  直接将长文本拆分为两行结构，第一行仅放置第一个单词，第二行通过text-indent设置和首行单词宽度匹配的缩进值，完全绕开浏览器伪元素的实现差异，兼容性覆盖所有版本的浏览器。
• 方案3（不推荐）：强制块级渲染触发伪元素解析
  给.menu-item显式添加display: block、overflow-wrap: break-word属性，部分版本的Safari可以借此修正flex子项的文本流识别逻辑，让:first-line样式生效。但这种方案受Safari版本迭代影响大，跨版本稳定性差，无法覆盖所有存量设备。

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