html标签页面自动获取文字高度,消除环绕效果，文字在图片右侧显示，overflow:-webkit-paged-x;word-break:break-all;

    本人是个前端小白完全是自己百度摸索前进的。

    在做一个微信公众号显示用户发送消息的页面，测试中发现如果用户发送消息过长就会导致用户内容溢出，所以就想让标签能够自适应用户发送内容的高度，并且让用户图片下方干净，跟微信公众号留言一样的格式如下图所示：

    

    图片下方一片空白，只在右侧显示，且下方的横线能自适应内容多少来显示，先说自适应高度，这个比较简单只要不规定标签高度，他就自己获取内容高度，然后全部显示，后来我在让文字完全显示在右侧的时候，总是显示文字环绕图片，就是头像下方也显示文字，这样就显得非常难看，后来经过各种尝试，慢慢调试发现使用overflow:-webkit-paged-x;word-break:break-all;这两个修饰属性就可以像上图显示了；

    overflow:-webkit-paged-x;这个属性是文字剪辑，横向方向的内容，说白了就是超过规定width的文字就会被剪裁掉，其余的不现实，但是为了让文字能够正常显示，就用到了word-break:break-all;属性，就是自动换行，在可现实范围内，自动换行，这样就做到了如图所示的效果，没有文字环绕。

    对了还要让文字居左显示即属性text-align:left;display:block;保证文字以左边为开始位置；图片也要浮动显示float：left;说了这么多我把代码贴出来方便一些；

<img src = "{$dt.usericon}" style = "padding-top:3px;float:left;" height="50" width="50"></img>
<div ><span id = "dt" style = "padding-top:10px;padding-left:10px;overflow:-webkit-paged-x;word-break:break-all;font-size:28px;color:black; font-family:'楷体'; text-align:left;display: block;">{$dt.usermsg}</span><br/></div>

大致就是这样显示的，同时我发现谷歌浏览器的f12很好用，所以如果遇到不会的可以去调试几次就能正常显示了~！