css文字环绕图片—遇到的问题及快速解决方法

2020-05-11 08:23:57易采站长站整理

需要实现一个文字环绕图片的效果,心想so easy嘛。

 1)代码部分

CSS Code复制内容到剪贴板

<style>   
        .img-left {   
            border: 3px solid #005588;   
            width:300px;   
        }   
        .img-left img {   
            float:left;  /* 对图片进行浮动就可以实现了  */  
            width:150px;   
        }   
    </style>   
      
   <div class="img-left">   
        <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" alt="pic"/>   
        这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文   
        <div style="clear:both;"></div>   
    </div>  

2)效果图

       

很容易就出来想要的效果了。最关键的代码:对图片进行左浮动就可以了,这不是挺简单的嘛。     

二、遇到的问题

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

      

于是查找相关资料,测试结果后发现:

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

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

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

上个对比图

      

三、解决方法

思考:CSS里面有没有相关的属性,可以对文字进行强制换行呢?