Wie kann ich Text in meinem TD-Wrap machen, wenn es die Breite des Bildes in meinem td erreicht?

Question

So habe ich <td> in meinem Tisch, der wie folgt aussieht:

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

Was ich will, tun können, ist die Breite jedes <td> die width des Bildes ist, dann sollte der Text wickeln, wenn es erreicht die width des Bildes in der nächsten Zeile. Stattdessen läuft der Text jedoch gerade weiter.

Gibt es etwas, was ich in JS/JQuery, HTML oder CSS tun kann, um das zu beheben? (vorzugsweise html/css)

Answer 1

geben Sie einfach die gleichen width in p, wie Sie die img geben, weil sie Geschwister sind.

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>