Ashwin Gupta Ashwin Gupta - 6 months ago 8
CSS Question

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

So I have

<td>
in my table that looks like this:

<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>


What I want to be able to do, is the width of each
<td>
is the
width
of the image, then the text should wrap when it reaches the
width
of the image to the next line. However, instead the text is just running on.

Is there something I can do in JS/JQuery,HTML, or CSS to fix this? (preferably html/css)

Answer

just give the same width in pas you are giving to the img because they are siblings.

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>

Comments