自动将浮动 div 的宽度固定为图像大小

Question

我想知道是否有一种方法可以强制包含图像和一些文本的浮动 div 不超出图像的宽度（而不是文本），从而强制文本以该宽度换行。

<div>
   <img src="some.jpg">
   <p>Some descriptive text here..</p>
</div>

当文本字符串占用的空间小于图像的宽度时，一切正常。但是当有更多文本时，默认是让 div 展开而不换行。

显而易见的解决方案是将 div 的宽度定义为与图像相同。但是，由于我有大约 50 页这样的页面，并且每张图片的大小和方向都不同，我想找到一种避免单独编码的方法。

如果可能的话，我更喜欢 CSS 解决方案，否则我更喜欢 JS。该站点是静态的，因此不能使用服务器端解决方案。

谢谢

Answer 1

这是执行此操作的一种方法。

div {
  display: inline-block;
}

p {
  word-break: break-all;
  min-width: 100%;
  width: min-content;
}

<div>
  <img src="https://upload.wikimedia.org/wikipedia/commons/f/fd/ComaAberrationSample.jpg">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy </p>
</div>