当我有足够的屏幕宽度时，文本会很好地环绕右浮动图像(参见下面的第一个示例)。但是当视口(viewport)变窄时，我可以在图像左侧找到一个单词，其余文本位于其下方，尤其是当前几个单词中的一个单词长度较长时(参见下面的第二个示例)。
如果没有在图像上添加额外的左边距(当有足够的空间时这看起来很奇怪)，我能做些什么来防止这种情况发生吗？
我不会提前知道实际的文本内容和视口(viewport)的宽度。
最佳答案
有点hacky，但将前几个单词包装在一个元素中，如<span>与 display:inline-block可以这么说，迫使整组词作为一个“实体”移动。
<span style="display:inline-block">First couple words</span> rest of content....
span {
display: inline-block;
}
img {
float:right;
}<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>关于HTML/CSS : How to Prevent Single Word Orphans Near Floated Elements?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48014865/