实现评论字体环绕的效果

想实现如图的这种文字环绕的的二级评论样式，可以以下两种方法。

1、使用word-wrap和word-break

CSS:

word-wrap:break-word；//文字强制换行
word-break:break-all; //英文单词强制换行

html:

<span class="replyContent">
    <span v-if="!oneReply.toComment">回复
        <a href="javascript:;" target="_blank" :class="oneReply.acceptorName===oneReply.initiatorName?'acceptorName1':'acceptorName'">@{{ oneReply.acceptorName }}</a>
    </span>
    :{{oneReply.content}}
</span>

2、利用浮动

浮动的盒子会遮盖下面的盒子，但是下面盒子里的文字是不会被遮盖的，文字反而还会环绕浮动的盒子。这也是一个比较有趣的特性。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aiKoQRd8-1649151600990)(http://taogezhenshuai.fun:3002/blogImage?url=public/blogIMG/1649145808687-image.png&filename=image.png)]
利用这一特性，也可以实现文字环绕的效果。

以上实例的代码：
CSS:

div{
    width: 300px;
    height: 50px;
    background-color: #bfa;
}
.span1{
    float: left;
    display: block;
    width: 100px;
    height: 30px;
    background-color: aqua;
}
.span2{
    display: block;
    background-color: skyblue;
    font-size: 12px;
}

html:

<div>
    <span class="span1"></span>
    <span class="span2">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或</span>
</div>

博客链接：个人博客