CSS实现文字环绕图片效果
文字环绕图片,在Word里只要click一下右键,调一下属性就可以了。但在HTML文档里就没有直接属性了。因此我们可以借助CSS来实现这一效果。
我们先设定float的参数,如果图片需要左对齐设为left,若右对齐则为:right。此外,我们还可以根据需要设置图片和文字间隔的空间,同样适用CSS的padding。
例:
(一)文字环绕图片实例
效果图:
(二)CSS文字环绕图片遇到的问题及解决方法:
一、前言
需要实现一个文字环绕图片的效果,心想so easy嘛。
1)代码部分
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实现文字环绕图片时遇到的问题及解决方法,希望对大家的学习有所帮助。
我们在做js动画的时候,很多时候都需要做回调处理,如在一个动画完成后触发一个...
身为一个前端攻城狮,是不是经常遇到各种各样的响应式问题?下面我们来说一下: ...
最近闲来无聊,看了下ES6的语法,结合canvas实现了动画特效随着鼠标的移动,会有...
HTML5 提供的本地存储功能,使得web应用可以将数据存储在用户的本地浏览器。在 H...
perspective属性对于3D变形来说至关重要。该属性会设置查看者的位置,并将可视内...
2017年1月3日TOP云(zuntop.com)科技报道,作为较早推出云计算的AWS来说,一直...
Dreamweaver想要使用一些网站不错的设计,可以直接套用网站源代码,下面我们就来...
1 效果 演示地址: https://www.albertyy.com/2020/7/check2.html 另一篇文章: ...
网页中的图片经常会做一些鼠标经过点击等效果,该怎么制作呢?今天我们就来看看...
前言 本文介绍的是css3的3d模块,对大家具有一定的参考价值,感兴趣的朋友们下面...