html - 环绕图像时的 CSS 段落最小宽度

Question

考虑以下 CSS/HTML:

img.text-wrap-left {
  float:left;  
}

<p>
  <img class="text-wrap-left" src="//lh3.googleusercontent.com/ZUMt7sn_FTLfvRK-B4XHK46Zyxv4kaj4O60tVXVMAg2m8Ohj0CdfinbEUmkwzaGmUE8V0jmKXHxSOvegEk3M3urVLsEbAzzmpwj-kDs=s660" width="550">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a ultrices est. Morbi semper enim sit amet feugiat fermentum. Phasellus odio lorem, finibus sit amet nibh ut, lobortis scelerisque nisl. Vestibulum mattis, ligula vitae sodales maximus, metus arcu egestas ex, non ullamcorper leo metus et mi. Integer libero justo, commodo a augue et, tempus aliquam leo. Donec ac ex aliquet, auctor erat sit amet, gravida metus. Duis vel condimentum dolor. Maecenas id consequat massa, vel dictum turpis. Cras dignissim aliquet mauris eu facilisis. Donec malesuada arcu in nulla commodo aliquam.

Nunc in est eget justo fringilla blandit. Morbi leo nisl, sagittis nec nulla ut, accumsan tristique orci. Praesent quis nisl pharetra, tempus nisi ornare, laoreet velit. Aliquam at dolor at eros elementum rutrum. Quisque tincidunt tincidunt nisi id porta. Cras hendrerit egestas leo, sed ultrices lorem dapibus et. Duis consectetur nisi eget ligula condimentum malesuada. Sed venenatis nisi id facilisis vestibulum. Nam tristique massa quis ornare blandit. Vivamus lobortis orci velit.
</p>

当调整视口(viewport)大小时，文字会绕到图片右侧，但也会变得很窄，甚至只有几个字母。

是否可以在段落完全位于图像下方之前指定文本的最小宽度，而不牺牲填充和边距？

在此示例中，一个简单的解决方案是添加 media CSS 条件，并告诉图像以特定宽度显示 display:block;。问题是这只是一个例子；我的问题是与文本一起使用的图像可能具有可变宽度(即它们是用户定义的)，我正在寻找响应式解决方案。

有什么想法吗？

Answer 1

我认为更好的选择是在图像上使用 max-width 以将其最大宽度保持在某个百分比，然后还添加媒体查询以在某些时候将文本换行。 Fiddle

img.text-wrap-left {
  float:left; 
  max-width: 50%;
}
@media(max-width: 480px) {
  img.text-wrap-left {
    display: block;
    float: none;
    max-width: 100%;
  }
}

<p>
  <img class="text-wrap-left" src="//lh3.googleusercontent.com/ZUMt7sn_FTLfvRK-B4XHK46Zyxv4kaj4O60tVXVMAg2m8Ohj0CdfinbEUmkwzaGmUE8V0jmKXHxSOvegEk3M3urVLsEbAzzmpwj-kDs=s660" width="550">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a ultrices est. Morbi semper enim sit amet feugiat fermentum. Phasellus odio lorem, finibus sit amet nibh ut, lobortis scelerisque nisl. Vestibulum mattis, ligula vitae sodales maximus, metus arcu egestas ex, non ullamcorper leo metus et mi. Integer libero justo, commodo a augue et, tempus aliquam leo. Donec ac ex aliquet, auctor erat sit amet, gravida metus. Duis vel condimentum dolor. Maecenas id consequat massa, vel dictum turpis. Cras dignissim aliquet mauris eu facilisis. Donec malesuada arcu in nulla commodo aliquam.

Nunc in est eget justo fringilla blandit. Morbi leo nisl, sagittis nec nulla ut, accumsan tristique orci. Praesent quis nisl pharetra, tempus nisi ornare, laoreet velit. Aliquam at dolor at eros elementum rutrum. Quisque tincidunt tincidunt nisi id porta. Cras hendrerit egestas leo, sed ultrices lorem dapibus et. Duis consectetur nisi eget ligula condimentum malesuada. Sed venenatis nisi id facilisis vestibulum. Nam tristique massa quis ornare blandit. Vivamus lobortis orci velit.
</p>