在浮动图像周围具有最小列宽的流动文本

Question

我想要一种方法来防止流动文本列变得太窄.例如,在HTML文本列中,有一个浮动到左侧的图像.正如预期的那样,文本在图像周围的列的右侧向下流动:

但是,如果图像几乎与列一样宽,那么文本最终会变得很窄:

在这种情况下,我希望文本不会流过图像,而是低于它,就好像图像是块一样:

我试图找到一种简单而通用的方法.这是一个博客 - 我希望能够添加图像和文本,可能添加一个类或粘贴一点标记(叹气),并让流程工作.我更喜欢用CSS和HTML来做,因为很难在博客文章中插入JavaScript.我有几种方法(参见我的答案),但两种方法都不令人满意.你能做得更好吗？

Answer 1

设置display: inline-block;为元素时,元素将与周围内容一起流动.

所以,你需要添加一个断行<br>,以产生文本换行,但行会的垂直空间仍然是你所提到的.[还有一件事是水平滚动条,如果你减小面板的宽度就会出现.]

介绍

使用<table></table>元素在这里有很多好处.

当您使用<table>元素(如下所示)时,它会导致内容转到下一行.当剩余的水平空间低于宽度时<table>,它将转到下一行并向下推动内容.

此外,在这种情况下,不会出现水平滚动条,因为浏览器不会显示<table>内部没有任何元素或任何特定height或border属性的情况.

(不同的浏览器有不同的行为,Mozilla Firefox不会显示table具有特定border属性的元素,但谷歌Chrome会这样做.)

HTML:

<img src="http://placehold.it/100x50" alt="">
<table></table>
Lorem ipsum dolor sit amet...

CSS:

img { float: left; }
table { width: 12em; }

这是JSBin演示.

解决方案

作为一种纯CSS方式,我使用::before伪元素来创建一个行为类似于<table>HTML元素的元素.

HTML:

<div>
  <img src="http://placehold.it/400x400" alt="">
  <p class="content">
    <!-- Here is the content... -->
  </p>
</div>

CSS:

img { float: left; }

.content:before {
  content: ' ';
  display: table;
  width: 10em;    /* <-- Change the current width size */
}

这是JSBin演示.

Answer 2

我发现的最简单的方法是通过防止前几个单词换行来设置列的最小宽度：

<style>
.chunk { white-space: nowrap; }
</style>

<p><span class="chunk">If one examines</span> Derridaist reading...

这很有效，但是：

• 每次执行此操作时我都必须手动编辑文本
• 我无法精确控制列宽（以 em 或像素为单位）