Chrome中带shape-outside兄弟元素的段落内Span无法换行问题求助

以下代码在Firefox中显示正常，段落内的第二个<span>会自动换行；但在Chrome中，第二个<span>会直接溢出段落宽度。使用inline-block虽能解决，但会丢失段落间的边距折叠效果，如何在保留边距折叠的前提下修复这个问题？

原代码示例 #

CSS #

p {
  width: 50px;
}

.some-float {
    display: block;
    width: 80px;
    height: 1px;
    position: relative;
    float: left;
    shape-outside: polygon(0 0, 100% 0);
}

HTML #

<div class="some-float"></div>
<p> <span>Hello</span> <span>World</span> </p>

解决方案 #

• 方案一：修正shape-outside的多边形定义
  问题根源是Chrome对无高度的多边形形状布局计算逻辑与Firefox不同。给多边形添加与浮动元素高度匹配的底部边，让Chrome正确识别布局空间：

  p {
    width: 50px;
  }
  
  .some-float {
      display: block;
      width: 80px;
      height: 1px;
      position: relative;
      float: left;
      /* 添加底部边，匹配元素的1px高度 */
      shape-outside: polygon(0 0, 100% 0, 100% 1px, 0 1px);
  }
  

• 方案二：给段落添加强制换行样式
  无需修改浮动元素，直接给<p>添加overflow-wrap: anywhere，强制内联内容在超出宽度时自动换行：

  p {
    width: 50px;
    overflow-wrap: anywhere;
  }
  
  .some-float {
      display: block;
      width: 80px;
      height: 1px;
      position: relative;
      float: left;
      shape-outside: polygon(0 0, 100% 0);
  }
  

两种方案都能保留段落的块级特性，不会丢失段落间的边距折叠效果。

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