html - 当文本达到我的 td 中图像的宽度时，如何在我的 td 换行中制作文本？

Question

所以我有 <td>在我的表中看起来像这样:

<tr> 
    <td>
        <p class="tableText">Random text that goes on REALLY long..........</p>
        <img src="www.imageurl.com/img.png" width="33vw">
    </td>
    <td>
        <p class="tableText">Random text that goes on REALLY long..........</p>
        <img src="www.imageurl.com/img.png" width="33vw">
    </td>
</tr>

我想做的是每个 <td> 的宽度是 width的图像，那么当文本到达 width 时应该换行图像到下一行。然而，文本只是在运行。

我可以在 JS/JQuery、HTML 或 CSS 中做些什么来解决这个问题吗？ (最好是 html/css)

Answer 1

只需在 p 中提供与 img 相同的 width，因为它们是 sibling 。

td {
  border: red solid
}
img {
  display: block;
  width: 33vw
}
p {
  width: 33vw
}

<table>
  <tr>
    <td>
      <p class="tableText">Random text that goes on REALLY long..........</p>
      <img src="//dummyimage.com/100x100" />
    </td>
    <td>
      <p class="tableText">Random text that goes on REALLY long..........</p>
      <img src="//dummyimage.com/100x100" />
    </td>
  </tr>
</table>