不间断地环绕浮动元素的长文本

Question

是否可以将一段长文本包裹在浮动元素周围？

目前我有一个元素漂浮在右边，普通文本很好地环绕着它。然而，即使使用 word-wrap: break-word，长文本也不会环绕图像。

CSS:

.right {
    float: right;
    margin-left: 5px;
    margin-bottom: 5px;
}
div {
    word-wrap: break-word;
}
.comment {
    background-color: aqua;
    width: 200px;
    padding: 1em;
}

HTML:

<div class='comment'>
    <div class="right">
        like
    </div> verylongtextverylongtextverylongtextverylongtextverylongtextverylongtextverylongtextverylongtextverylongtextverylongtextverylong
</div>

Answer 1

我认为您正在寻找 word-break: break-all; 而不是 word-wrap。因为它是一个很长的单词，所以你想要 break 它，只有当单词用空格分隔（类似于中断）时你才想要 wrap 它们围绕某些东西。东西没坏，就包不住。

因此您的 CSS 将如下所示：

.right {
    float: right;
    margin-left: 5px;
    margin-bottom: 5px;
}
div {
    word-break: break-all;
}
.comment {
    background-color: aqua;
    width: 200px;
    padding: 1em;
}

JSFIDDLE

关于 word-break 的更多信息。

不间断地环绕浮动元素的长文本

long text without break to wrap around float element

css

word-wrap