css文字环绕图片—遇到的问题及快速解决方法
发布时间：2016-04-26 17:09:37 作者：佚名 
我要评论
我要评论下面小编就为大家带来一篇css文字环绕图片--遇到的问题及快速解决方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考
需要实现一个文字环绕图片的效果，心想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里面有没有相关的属性，可以对文字进行强制换行呢？
答案当然是有的：word-break: break-all;
这样就可以解决问题了。
四、后记：word-wrap、word-break
在查找资料的时候，发现还有个属性：word-wrap：break-word; 这咋还出现重复属性了呢？
其实不然，又是一通查找资料，发现这俩还是有区别的：
1) word-wrap : break-word ;
--允许长单词换行到下一行。
当一个单词长度超过div的宽度时，默认是不会换行的：如下图
如果设置word-wrap : break-word; 这个单词就会进行换行显示
2）word-break : break-all;
-- 是否对单词进行断词处理。
--个人理解就是： 它会把一个单词的每个字母拆分成独立的单元，
这样就可以把它填充到每个地方，所以才能达到文字环绕图片的效果。
以上这篇css文字环绕图片—遇到的问题及快速解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
- 这篇文章主要介绍了css文件中的样式类被覆盖，js文件中的变量未定义问题的相关资料,需要的朋友可以参考下2016-04-27
- 这篇文章主要为大家详细介绍了CSS文字环绕图片遇到的问题及解决方法，感兴趣的小伙伴们可以参考一下2016-04-27
- 水平居中是经常遇到的问题。看似方法较多，条条大路通罗马。但系统梳理下，其实都围绕着几个思路展开。本文将介绍关于水平居中的4种思路，感兴趣的朋友参考下吧2016-04-27
- 这篇文章主要介绍了横向两列布局，即左列固定，右列自适应的4种CSS实现方式，感兴趣的小伙伴们可以参考一下2016-04-27
- 这篇文章主要为大家分享了网页布局入门教程，如何用CSS进行网页布局，介绍了绝对定位布局、混合布局及结构与表现原则，感兴趣的小伙伴们可以参考一下2016-04-27
本特效是一组效果超酷的表单input输入框聚焦CSS3动画特效效果的代码。这组特效共24种不同的聚焦动画效果，欢迎下载使用2016-04-26- 喜欢钓鱼还没那个技术钓到鱼，下面小编画条大鱼安慰我一下柔弱的心灵。感兴趣的朋友参考下吧2016-04-26
- 这篇文章主要为大家介绍了CSS3实现超酷的黑猫警长首页的相关代码，效果酷炫，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-04-26
CSS3实现千变万化的文字阴影text-shadow效果设计
这篇文章主要介绍了CSS3实现千变万化的文字阴影text-shadow效果设计的相关资料，感兴趣的小伙伴们可以参考一下2016-04-26- 下面小编就为大家带来一篇css 各浏览器下的背景色渐变【代码】。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧2016-04-27
最新评论