HTML/CSS：如何防止浮动元素附近的单个单词孤立？

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

除了在图像上添加额外的左边距（如果有足够的空间，看起来会很奇怪），我能做些什么来防止这种情况

我不会提前知道实际的文本内容或视口的宽度

---

有点老套，但将前两个单词包装在一个元素中，如

，使用

display:inline block

可以说，强制整个单词集作为一个“实体”移动

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

前两个词是Lorem ipsum Door sit amet，Concertetur Adipis Elite。布拉迪特美术馆（Curabitur blandit aliquam mauris），犹他州，临时精英车辆。这是一个巨大的挑战，这是一个充满活力的挑战。猫前庭和猫前庭位于同侧前庭之间。纳拉·阿库姆桑（nullaacumsan）是turpis vitae权杖。纳拉·达皮布斯是一位显贵。产于蒙特斯的天然对虾和马格纳斯虎鲸（Orci varius natoque penatibus et magnis），以及印度虎鲸（nascetur ridiculus mus）。这是一家新公司，nec公司。塞德没有被诅咒。尼斯普鲁斯，我的母亲，我的母亲。维瓦摩斯在埃格斯塔斯广场。莫比把我放在一个没有毛里斯的地方。艾蒂亚姆在艾库利斯麦格纳，艾库利斯英特杜姆洛雷姆。潜力悬钩子。尼西-特勒斯元素阶段，发酵前庭阶段。

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

如果您不想滥用DOM，就像Kevin Pei的解决方案一样，您可以滥用文本。将文本中的第一个空格设为不间断空格，

，浏览器将不会在此处插入换行符：

img{
浮动：对；
}

Lorem Ipsumdolorositamet，一位杰出的献身者。布拉迪特美术馆（Curabitur blandit aliquam mauris），犹他州，临时精英车辆。这是一个巨大的挑战，这是一个充满活力的挑战。猫前庭和猫前庭位于同侧前庭之间。纳拉·阿库姆桑（nullaacumsan）是turpis vitae权杖。纳拉·达皮布斯是一位显贵。产于蒙特斯的天然对虾和马格纳斯虎鲸（Orci varius natoque penatibus et magnis），以及印度虎鲸（nascetur ridiculus mus）。这是一家新公司，nec公司。塞德没有被诅咒。尼斯普鲁斯，我的母亲，我的母亲。维瓦摩斯在埃格斯塔斯广场。莫比把我放在一个没有毛里斯的地方。艾蒂亚姆在艾库利斯麦格纳，艾库利斯英特杜姆洛雷姆。潜力悬钩子。尼西-特勒斯元素阶段，发酵前庭阶段。

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

由于当浮动图像为文本留出一点空间，但不足以使其顺畅流动时，就会出现问题，因此我强制图像不为任何文本留出空间

我通过媒体查询来实现这一点——对于我正在工作的站点，@media（最大宽度：550px）是最佳选择。在我的图片上已经有一个类，我只添加了“宽度：99%”

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

有人认为这样做有问题吗