Question

有没有办法阻止一个或两个单词围绕浮动包裹，但如果有更多文本则允许它？这是第一个文本有问题但第二个文本没问题的例子。

<div class="wrapper">
<img src="http://lorempixel.com/100/100/animals" />
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut <span class="last-bit">labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</span></div>
</div>

<div class="wrapper">
<img src="http://lorempixel.com/100/100/animals" />
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <span class="last-text">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></div>
</div>

CSS：

img {
    float:left;
    margin:10px;
    width:100px;
    height:100px;
}

.wrapper {
    width:300px;
    margin-bottom:20px;
}

.text {
}

.last-text {
}

更新：请注意，我事先并不知道文本将在哪里换行 - 我正在寻找一个通用的解决方案，如果它存在的话。例如，某些“.last-text”样式导致它不能在float下包装。

CSS / HTML解决方案优于JavaScript。

Answer 1

防止单词包装很容易：只需在最后两个单词之间使用不间断空格，而不是普通空格（例如nostrud exercitation）。

然而，我担心这不会解决真正的问题。在示例的情况下，将有一个双字包装，留下最后但一行短。如果文字变大，即使没有必要，这两个词也会粘在一起。

我担心这个问题需要一些非常重要的JavaScript代码，在初始格式化后，分析文本块的高度与图像的高度相比，并根据某些标准更改样式。

Answer 2

只需将padding-bottom: 1px;添加到img

即可

Demo

img {
    float:left;
    margin:10px;
    width:100px;
    height:100px;
    padding-bottom: 1px;
}

你也可以使用左右列，是的我肯定使用了内联样式但是如果你想采用这种方法而不是使类清晰并摆脱内联样式

Demo 2

Answer 3

对不起 - 不是一个明确的答案，但我回答了同样的问题。我在那里收到的答案之一是有希望的（使用JS）但到目前为止我还没有能够解决它。我的问题还使用图像来说明可能有用的问题。

我在使用CMS

的响应式布局中始终遇到此问题

Awkward line wrap around image

Answer 4

解决方案是稍微增加.wrapper类宽度。

这是.wrapper类：

.wrapper {
        width:330px;
        margin-bottom:20px;
    }

http://jsfiddle.net/wdPCp/4/

Answer 5

如果您不希望文本在浮动下包装，请将overflow: hidden添加到.text。

http://jsfiddle.net/wdPCp/6/

Answer 6

查看不同的显示样式。表格显示（不是标签）不包含浮动元素。

.text{
  display:table;
}

防止单个词在css / html中环绕浮动

6 个答案: