css - 如何让字体包围在图片周围？

问题描述

问 题

    <style type="text/css">
      div {
        width:400px;
        height: 300px;
      }
      img {
        float: right;
      }

    </style>
<div>
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2277586695,4028601478&fm=116&gp=0.jpg" alt="">
<strong>asdasdadasdassssssssssssssssssssssssssssssssssssssssssssssssdasdasdasdasdasdasd</strong>
</div>

我想要达到这种效果

解决方案

谢邀。
感看到题目的第一反应是:"一个float不就搞定了吗?"仔细看了下题主给出的例子中，也有设置了float属性，但是再看看效果图... 第一时间没反应过来，也懵逼了，喝了口水终于反应过来了！
你把那串sssssssss换成一段中文试试看！
知道问题出在哪里了没？你写的一长串s没有空格 被浏览器当做一个单词来解析了，默认单词不会被打断，所以甚至你给div设置了宽度都没用，为了验证，不妨在div的css里面再加上一句 word-break:break-all;喏！可以了吧。
这个故事告诉我们:喝水有利于写代码。啊哈哈哈~

这篇关于css - 如何让字体包围在图片周围？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！