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

【问题标题】：Prevent single word from wrapping around float in css/html防止单个单词在 css/html 中环绕浮动
【发布时间】：2013-01-30 18:23:52
【问题描述】：

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

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。

【问题讨论】：

文本的第一位到底有什么问题？相反，您希望它看起来像什么？
最后一个单词包裹在图像下方，并且似乎与文本的其余部分没有关联。基本上，如果只是几个单词，我想直接包裹在文本下，否则让它像往常一样包裹在浮动元素下。

标签： html css css-float word-wrap

【解决方案1】：

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

Demo

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

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

Demo 2

【讨论】：

这在这种特殊情况下有效，但我事先不知道文本将在哪里换行（即，这是在模板中，文本可以是任意长度）。如果存在，我正在寻找更通用的解决方案。

【解决方案2】：

解决办法是稍微增加.wrapper类的宽度。

这里是.wrapper 类：

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

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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

我确实希望它在多于几个单词时换行。 “最后一个文本”跨度在那里，因为我正在尝试溢出：隐藏它，但该技巧显然不适用于内联元素。
我不太确定你想问什么。放置在浮动元素之后的文本的默认行为是环绕浮动元素。
当然 - 但正如您的示例所示，文本可以设置为不环绕元素。我想知道是否有一种方法可以只防止最后一点文本不环绕它。但它看起来不是那样的（没有 javascript）。
所以你的意思是如果图像周围只有一行文字，它不应该换行，但如果图像周围有超过一行文字，那么它应该换行?

【解决方案5】：

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

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

Awkward line wrap around image

【讨论】：

【解决方案6】：

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

.text{
  display:table;
}

【讨论】：