Html 将文本置于图像上方，不带'；位置：绝对位置'；并将其包裹以适合CSS网格中的隔间

.grid容器{
显示：网格；
网格模板列：重复（自动拟合，最小值（18vw，1fr））；
网格自动行：最小最大值（35vh，1fr）；
间隙：20px 20px；
}
.盒子{
显示器：flex；
证明内容：中心；
对齐项目：居中；
不透明度：0.85；
背景：绿色；
颜色：#efefef；
字号：2em；
边界半径：10px；
过渡：所有0.3s线性；
}
.box img{
显示：块；
左边距：自动；
右边距：自动；
宽度：50%；
不透明度：0.6；
滤波器：亮度（0）反转（1）；
}
.方框p{
位置：绝对位置；
字体大小：calc（0.9em+0.9vw）；
字体大小：粗体；
}

...

使用

位置：绝对时，请使用
位置：相对以使子元素使用父元素作为其位置引用（）。另外，添加了
.box p{text align:center}


.grid容器{
显示：网格；
网格模板列：重复（自动拟合，最小值（18vw，1fr））；
网格自动行：最小最大值（35vh，1fr）；
间隙：20px 20px；
}
.盒子{
位置：相对位置；
显示器：flex；
证明内容：中心；
对齐项目：居中；
不透明度：0.85；
背景：绿色；
颜色：#efefef；
字号：2em；
边界半径：10px；
过渡：所有0.3s线性；
}
.box img{
显示：块；
左边距：自动；
右边距：自动；
宽度：50%；
不透明度：0.6；
滤波器：亮度（0）反转（1）；
}
.方框p{
位置：绝对位置；
字体大小：calc（12px）；
字体大小：粗体；
文本对齐：居中；
}

...
Try:-.box p{word break:break all；}感谢@S.M的评论，但添加该评论没有任何效果。使用文本颜色
#efefefef
在代码段中很难可视化，并且在框上没有边框。
在
框上放置：绝对值
。box p
将该内容从流中拉出，这就是它不包装的原因。。。它不在容器中，所以边界不会影响它。如果你摆脱了文本包装，那么你必须找到其他方法将其定位在你想要的地方。
.box{position:relative；}
将在这里有所帮助。它非常有效。我投了赞成票，接受了答案。谢谢你的帮助！