css如何使文字环绕显示

css如何使文字环绕显示

css实现文字环绕可以使用float来实现，下面介绍下具体的实现方法。

1）代码部分

<style>
    .img-left {
        border: 3px solid #005588;
        width:300px;
    }
    .img-left img {
        float:left;  /* 对图片进行浮动就可以实现了  */
        width:150px;
    }
</style>

<div class="img-left">
    <img src="./img.png-600" alt="pic"/>
    这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这
    是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是
    一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是
    一段中文这是一段中文这是一段中文这是一段中文
    <div style="clear:both;"></div>
</div>

2）效果图（相关课程推荐：css视频教程）

很容易就出来想要的效果了。最关键的代码：对图片进行左浮动就可以了。

遇到的问题

当把中间的文字替换成连续的英文字母时，出现问题了，如图

这是因为浏览器默认解析英文或者数字时，是按照单词进行解析。

也就是说，每个单词是一个整体，遇到空间不足时，不会对单词进行拆分。

所以才会出现上面这种情况。

使用css属性word-break: break-all;即可解决。

本文来自css3答疑栏目，欢迎学习！

以上就是css如何使文字环绕显示的详细内容，更多请关注0133技术站其它相关文章！