如何使文字环绕图像而不留空格或换行符？

Question

I want to have text wrap around an image (which I achieved) and when a line breaks not to have whitespace around the image.

 <div id="container1"> <div id="container2" style="width: 300px"> <font color="black"> <h1 class="customfonter">Title</h1> <img src="https://via.placeholder.com/530x400" width="34%" height="auto" style="float: left; margin-right:1%;margin-top:1%;"> <pre style="width: auto;white-space: pre-wrap;word-wrap: break-word;">Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext <a id="link" href="#">more</a></pre> </font> </div> <div> 

Answer 1

I couldn't find the solution I was looking for, so I settled with using margin-bottom to make sure no text got under the picture.

The script I made to automatically change the height of the bottom margin with the HTML from my question:

 setInterval(refresh, 1000/30); function refresh() { ih = document.getElementsByTagName('img')[0].getBoundingClientRect().height; ph = document.getElementsByTagName('pre')[0].getBoundingClientRect().height; document.getElementsByTagName('img')[0].style.marginBottom = `${Math.abs(ph - ih)}px`; } 

 <div id="container1"> <div id="container2" style="width: 300px"> <font color="black"> <h1 class="customfonter">Title</h1> <img src="https://via.placeholder.com/530x400" width="34%" height="auto" style="float: left; margin-right:1%;margin-top:1%;"> <pre style="width: auto;white-space: pre-wrap;word-wrap: break-word;">Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext Randomtext <a id="link" href="#">more</a></pre> </font> </div> <div> 

Answer 2

尝试以行高播放文本以使其最适合，或为图像设置边距右以在文本和图像之间形成相同的“空白”