环绕浮动时避免悬空文本

Question

图片说得最好：

它只是一个float: left图像（http://jsbin.com/itihes/1）。有什么方法可以防止纯 CSS 中的动态文本出现此问题？我确实希望文本换行，但如果它少于一整行（最好是两整行），则所有文本都将保留在右侧的同一块中。

图像宽度是固定的，但整个块的宽度是动态的。

Answer 1

在这种情况下，您唯一能做的就是将图像的边距底部提高到大约。字体大小的两倍。字体大小 12 像素，底部边距 24 像素。您仍然可以有一个孤儿，但在上述情况下，文本将保持内联，不会换行，并且对于更长的文本，它会正确换行。它留下了一个小窗口，您仍然可以在其中拥有单行孤儿。