CSS实现文字环绕图片效果
CSS实现文字环绕图片效果
文字环绕图片,在Word里只要click一下右键,调一下属性就可以了。但在HTML文档里就没有直接属性了。因此我们可以借助CSS来实现这一效果。
我们先设定float的参数,如果图片需要左对齐设为left,若右对齐则为:right。此外,我们还可以根据需要设置图片和文字间隔的空间,同样适用CSS的padding。
例:
(一)文字环绕图片实例
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>文字环绕</title>
- <style>
- div {
- width:300px;
- border:1px solid green
- }
- img {
- float:left;
- width:120px;
- height:120px
- }
- </style>
- </head>
- <body>
- <div>
- <img src="img.gif" alt="图片" />
- 文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕</div>
- </body>
- </html>
效果图:
(二)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实现文字环绕图片时遇到的问题及解决方法,希望对大家的学习有所帮助。
相关文章
- 下面小编就为大家带来一篇浅析CSS实现水平垂直同时居中的5种思路。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧2016-04-28
- 这篇文章主要介绍了CSS3近阶段篇之酷炫的3D旋转透视 的相关资料,需要的朋友可以参考下2016-04-28
- 这篇文章主要介绍了图解CSS中position属性的定位用法,重点讲解了相对定位和绝对定位在页面布局中的作用,需要的朋友可以参考下2016-04-28
- 这篇文章主要介绍了使用CSS的position控制页面布局的入门教程,讲解了position几个常用值在布局中的作用,需要的朋友可以参考下2016-04-28
- 这篇文章主要介绍了CSS编写中的属性优先级问题,重点讲解了元素之间的层级计算以及继承关系,需要的朋友可以参考下2016-04-28
- 这篇文章主要介绍了详解CSS中的伪类与伪元素及二者间的区别,实际上CSS3中规范了一种简单粗暴的方法,即伪类前用一个冒号表示,而伪元素前用两个冒号表示,这样就不容易混淆了,2016-04-28
- 这篇文章主要介绍了CSS3的first-child选择器实战攻略,包括first-child和:first-of-child的区别以及针对IE兼容问题的讲解,需要的朋友可以参考下2016-04-28
- 下面小编就为大家带来一篇css 各浏览器下的背景色渐变【代码】。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧2016-04-27
- 这篇文章主要介绍了css文件中的样式类被覆盖,js文件中的变量未定义问题的相关资料,需要的朋友可以参考下2016-04-27
- 下面小编就为大家带来一篇stylus css 框架使用方法深入解析。小编觉得挺不错的,现在分享给大家,也给大家做个参考2016-04-28
最新评论