DDR爱好者之家

css文字环绕图片—遇到的问题及快速解决方法
站长资源 2024/11/23 佚名
17 1538
DDR爱好者之家 Design By 杰米

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

 1）代码部分

CSS Code复制内容到剪贴板
  1. <style>   
  2.         .img-left {   
  3.             border: 3px solid #005588;   
  4.             width:300px;   
  5.         }   
  6.         .img-left img {   
  7.             float:left;  /* 对图片进行浮动就可以实现了  */  
  8.             width:150px;   
  9.         }   
  10.     </style>   
  11.       
  12.    <div class="img-left">   
  13.         <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" alt="pic"/>   
  14.         这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文   
  15.         <div style="clear:both;"></div>   
  16.     </div>  

2）效果图

       

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

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

二、遇到的问题

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

      

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

于是查找相关资料，测试结果后发现：

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

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

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

上个对比图

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

三、解决方法

思考：CSS里面有没有相关的属性，可以对文字进行强制换行呢？

答案当然是有的：word-break: break-all;

这样就可以解决问题了。

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

 

四、后记：word-wrap、word-break

在查找资料的时候，发现还有个属性：word-wrap：break-word;  这咋还出现重复属性了呢？

其实不然，又是一通查找资料，发现这俩还是有区别的：

1) word-wrap : break-word ;

  --允许长单词换行到下一行。

 当一个单词长度超过div的宽度时，默认是不会换行的：如下图

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

 如果设置word-wrap : break-word;  这个单词就会进行换行显示

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

  2）word-break : break-all;

 -- 是否对单词进行断词处理。

  --个人理解就是： 它会把一个单词的每个字母拆分成独立的单元，

 这样就可以把它填充到每个地方，所以才能达到文字环绕图片的效果。

以上这篇css文字环绕图片—遇到的问题及快速解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米