长文本无中断环绕浮动元素

Question

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

目前我有一个向右浮动的元素，正常的文本很好地环绕它。然而，即使使用word-wrap: break-word，长文本也不会环绕图像。

https://jsfiddle.net/64pp4kmm/1/

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的更多信息。