html - 获取 <p> 文本以适应收缩包装

Question

我试图让下面的 .copy 收缩包装到图像的宽度:

HTML:
<div class="post">
  <img src="some/image.png" />
  <div class="copy">
    <p>Morbi dignissim leo a erat tristique eu faucibus dolor commodo. Cras scelerisque, est quis molestie tempus, ante sem fringilla ante, non convallis quam mi ac metus. Donec rhoncus mattis consectetur. Maecenas cursus, dolor ut facilisis consequat, dolor quam interdum quam, vel lacinia arcu neque vel erat.</p>
  </div>
</div>

CSS:
.post {
  float: right;
}

.post 是 float 的，将其收缩包装到其内容的宽度。如果 .copy 不多，这会起作用，但是当 .copy 变长时，它会扩展 .post。有没有办法让 .copy 保持图像的宽度？

不幸的是，图像宽度会根据页面宽度而变化，因此我无法设置实际尺寸。我只想让图像自己定义 .post 宽度。

有没有办法不借助 javascript 来做到这一点？

Answer 1

我想不出任何方法来做到这一点。但是，即使您的图片是动态的，您也可以从服务器端(例如 PHP)或 even from Javascript 获取它的大小。 .然后，您可以将宽度添加到 div.post 元素，以使内部的所有内容都保持在该宽度。