5

有什么方法可以防止一个或两个单词环绕浮点数，但如果有更多文本则允许它？这是一个示例，其中第一个文本有问题，但第二个文本很好。

http://jsfiddle.net/wdPCp/

<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”的某些样式会导致它不包裹在浮点数下。

CSS/HTML 解决方案优于 JavaScript。

4

6 回答 6

12

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

但是，恐怕这并不能解决真正的问题。在示例案例中，将有一个两个单词换行，最后一行很短。如果文本变大，即使没有必要，这两个词也会粘在一起。

恐怕这个问题需要一些重要的 JavaScript 代码，在初始格式化后，将文本块的高度与图像的高度进行比较，并根据某些标准更改样式。

于 2013-02-14T21:10:12.827 回答
3

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

演示

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

您也可以使用左右列，是的，我当然使用过内联样式，但如果您想采用这种方法，而不是创建一个清晰的类并摆脱内联样式

演示 2

于 2013-02-14T20:36:22.683 回答
1

抱歉 - 不是一个明确的答案，但我不久前问了同样的问题。我在那里收到的答案之一是有希望的（使用 JS），但到目前为止我还无法解决。我的问题还使用图像来说明可能有帮助的问题。

我在使用 CMS 的响应式布局中一直遇到这个问题

尴尬的线环绕图像

于 2013-11-12T09:39:30.463 回答
0

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

这是.wrapper课程：

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

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

于 2013-02-14T20:37:17.057 回答
0

如果您不希望文本在浮动下换行，请overflow: hidden添加。.text

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

于 2013-02-14T22:34:34.983 回答
0

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

.text{
  display:table;
}
于 2014-09-12T03:57:55.183 回答