没有中断的长文本包裹浮动元素

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