HTML / CSS：如何防止浮动元素附近的单字孤儿？

Question

当我有足够的屏幕宽度时，文本会很好地围绕右浮动图像（请参阅下面的第一个示例）。但是当视口变窄时，我可以在图像的左边找到一个单词，其下面是文本的其余部分，特别是如果前几个单词中的一个长度较长（参见下面的第二个示例）。

如果没有在图像上添加额外的左边距（当有足够的空间时看起来很奇怪），我有什么办法可以防止这种情况发生吗？

我提前知道实际的文字内容和视口的宽度。

Answer 1

有点hacky但将前几个单词包裹在<span>和display:inline-block之类的元素中会强制整个单词集合作为一个＆＃34;实体＆＃34;可以这么说。

<span style="display:inline-block">First couple words</span> rest of content....

＆＃13;

＆＃13;

span {
  display: inline-block;
}
img {
  float:right;
}

＆＃13;

<div>
<img src="https://placehold.it/300x300" />
<span>First couple words</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur blandit aliquam mauris, ut tempor elit vehicula ut. Cras quis consequat magna, quis viverra risus. Vestibulum et mattis felis, sed interdum ipsum. Nulla accumsan a turpis vitae scelerisque. Nulla dapibus imperdiet quam a dignissim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed egestas sem nunc, nec semper tortor hendrerit a. Sed non cursus metus. Nunc nisl purus, accumsan sed ligula quis, mollis euismod mi. Vivamus at egestas diam. Morbi sed mi in est eleifend tempus nec non mauris. Etiam at iaculis magna, iaculis interdum lorem. Suspendisse potenti. Phasellus elementum nisi tellus, ut vestibulum massa laoreet fermentum.

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果我理解您的问题，您可以使用clear：left属性来解决此处显示的问题：w3School

Answer 3

如果你不想滥用你的DOM，就像在Kevin Pei的解决方案中那样，你可以滥用你的文字。使文本中的第一个空格成为不间断的空格 ，浏览器不会在那里插入换行符：

img {
  float: right;
}

<div>
<img src="https://placehold.it/500x50">
Lorem&nbsp;ipsumdolorsitamet, consectetur adipiscing elit. Curabitur blandit aliquam mauris, ut tempor elit vehicula ut. Cras quis consequat magna, quis viverra risus. Vestibulum et mattis felis, sed interdum ipsum. Nulla accumsan a turpis vitae scelerisque. Nulla dapibus imperdiet quam a dignissim. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed egestas sem nunc, nec semper tortor hendrerit a. Sed non cursus metus. Nunc nisl purus, accumsan sed ligula quis, mollis euismod mi. Vivamus at egestas diam. Morbi sed mi in est eleifend tempus nec non mauris. Etiam at iaculis magna, iaculis interdum lorem. Suspendisse potenti. Phasellus elementum nisi tellus, ut vestibulum massa laoreet fermentum.
</div>

_{感觉良好使用＆amp; nbsp;用于除空表格单元格之外的其他内容。}

Answer 4

我可能已经找到了另一种解决方案，它在语义上更正确，并且不需要对文本本身进行任何操作......

由于当漂浮的图像为文本留下一点空间时出现问题，但不足以使其流畅，我强迫图像为任何文本留下空间。

我使用媒体查询执行此操作 - 对于我正在处理的网站，@ media（max-width：550px）是最佳选择。在我已经拥有的图像上，我只需添加＆＃34;宽度：99％＆＃34;。

当视口大于550px时，有足够的空间让文本正常流动。低于550px，无论如何我没有多少空间，图像现在几乎占据了整个宽度，并将文本推到下面。

任何人都认为这样做有问题吗？