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

Question

所以我的 table 中有 <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 时应该换行图像到下一行。但是，文本只是运行 on.

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

Answer 1

只需在 p 中给予与 img 相同的 width，因为他们是兄弟姐妹。

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>

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

How can I make text in my td wrap when it reaches the width of the image in my td?

html

css

html-table

word-wrap