为何段落元素会溢出父容器及body？含transform:scale场景

你遇到的文本溢出问题，核心在于**transform: scale()只改变元素视觉表现，不影响其布局占位尺寸**：

• 你的图片设置了width: 116vw; height: 116vw;，这是它在页面布局中实际占据的空间
• transform: scale(0.5)只是把图片视觉上缩小到一半，但浏览器计算文本环绕（shape-outside）时，仍以原始的116vw尺寸为基准生成圆形区域
• 这就导致文本被强制绕开一个远大于视觉图片的圆形范围，最终溢出容器和body

方案1：修改shape-outside参数匹配缩放后的尺寸 #

既然用了scale(0.5)，把shape-outside的圆形半径也缩小一半，同时调整圆心位置：

img.boat-main {
  float: left;
  object-fit: cover;
  width: 116vw;
  height: 116vw;
  transform: translate(-25%, -25%) scale(0.5);
  object-position: center -150px;
  /* 半径按缩放比例减半，圆心位置同步调整 */
  shape-outside: circle(26.5% at -12.5% -12.5%);
  border-bottom-right-radius: 100%;
}

原理：缩放后，原始圆心位置(0,0)对应缩放后的(-12.5%, -12.5%)，半径同步减半后，文本环绕区域就能和视觉上的图片匹配。

方案2：直接修改宽高代替transform缩放（更推荐） #

如果不需要保留原始布局占位，直接调整图片的width和height实现缩放，让布局尺寸和视觉尺寸一致，shape-outside就能正常匹配：

img.boat-main {
  float: left;
  object-fit: cover;
  /* 直接把宽高改为原来的一半 */
  width: 58vw;
  height: 58vw;
  /* 去掉transform，同步调整object-position适配新尺寸 */
  object-position: center -75px;
  shape-outside: circle(53% at 0 0);
  border-bottom-right-radius: 100%;
}

原理：修改宽高会改变元素的布局盒模型，浏览器计算文本环绕时会使用这个实际尺寸，不会出现错位和溢出问题。

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