在没有 'position: absolute;' 的情况下将文本放在图像上并将其包裹以适合 CSS 网格中的隔间

Question

.grid-container {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(18vw, 1fr) );
  grid-auto-rows: minmax(35vh, 1fr);
  gap: 20px 20px;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  opacity:0.85;
  background: green;
  color: #efefef;
  font-size:2em;
  border-radius:10px;
  transition: all 0.3s linear;
}

.box img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  opacity: 0.6;
  filter: brightness(0) invert(1);
}

.box p  {
  position: absolute;
  font-size: calc(0.9em + 0.9vw);
  font-weight: bold;
}

<div class="grid-container">
  <a href='link' class="box">
    <img src="src/img.png"/>
    <p>TEXT</p>
  </a>
  <a href='link2' class="box">
    <img src="src/img2.png"/>
    <p>ANOTHER TEXT</p>
  </a>
  ...
</div>

一切正常，图像在其 'box' 中水平和垂直居中，文本也居中 (v&h) 并位于图像上方。一切都响应 window 大小，因此每列的框越宽，文本越大。

唯一的问题是文本不会分成几行，并且会溢出一些 windows 大小的框。有没有办法让 <p> 元素中的文本根据框的大小换行？

我有多种变体，比如使用 word-wrap (overflow-wrap)，将 <img> 和 <p> 放在另一个 <div> 中......但是似乎没有任何效果。

==========================

根据评论进行编辑。

.box p 个元素的 position: absolute; 正在将其内容移出流。也许更好的选择是通过另一种方法获得文本在图像上的效果。知道怎么做吗？

编辑标题以更好地描述评论后的问题

Answer 1

在使用 position: absolute 时，在父容器上使用 position: relative; 以使子元素使用父元素作为其位置参考 (position: relative and position: absolute summary here)。另外，添加了 .box p { text-align: center }

.grid-container {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(18vw, 1fr) );
  grid-auto-rows: minmax(35vh, 1fr);
  gap: 20px 20px;
}

.box {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity:0.85;
  background: green;
  color: #efefef;
  font-size:2em;
  border-radius:10px;
  transition: all 0.3s linear;
}

.box img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  opacity: 0.6;
  filter: brightness(0) invert(1);
}

.box p  {
  position: absolute;
  font-size: calc(12px);
  font-weight: bold;
  text-align: center;
}

<div class="grid-container">
  <a href='link' class="box">
    <img src="src/img.png"/>
    <p>TEXT</p>
  </a>
  <a href='link2' class="box">
    <img src="src/img2.png"/>
    <p>ANOTHER TEXT that is much longer to show that you can center the text.</p>
  </a>
  ...
</div>

在没有 'position: absolute;' 的情况下将文本放在图像上并将其包裹以适合 CSS 网格中的隔间

Put text over image without 'position: absolute;' and wrap it to fit compartment in CSS grid

html

css

css-position

flexbox

css-grid