在css中用属性来实现文字环绕图片(css文字环绕图片—遇到的问题及快速解决方法)
类别:Web前端 浏览量:1446
时间:2022-01-16 00:58:37 在css中用属性来实现文字环绕图片
css文字环绕图片—遇到的问题及快速解决方法需要实现一个文字环绕图片的效果,心想so easy嘛。
1)代码部分
- <style>
- .img-left {
- border: 3px solid #005588;
- width:300px;
- }
- .img-left img {
- float:left; /* 对图片进行浮动就可以实现了 */
- width:150px;
- }
- </style>
- <li class="img-left">
- <img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.jpg" alt="在css中用属性来实现文字环绕图片(css文字环绕图片—遇到的问题及快速解决方法)" border="0" /> alt="pic"/>
- 这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文
- <li style="clear:both;"></li>
- </li>
2)效果图
很容易就出来想要的效果了。最关键的代码:对图片进行左浮动就可以了,这不是挺简单的嘛。
二、遇到的问题当把中间的文字替换成连续的英文字母时,出现问题了,如图
于是查找相关资料,测试结果后发现:
浏览器默认解析英文或者数字时,是按照单词进行解析。
也就是说,每个单词是一个整体,遇到空间不足时,不会对单词进行拆分。
所以才会出现上面这种情况。
上个对比图
三、解决方法
思考:CSS里面有没有相关的属性,可以对文字进行强制换行呢?
答案当然是有的:word-break: break-all;
这样就可以解决问题了。
四、后记:word-wrap、word-break
在查找资料的时候,发现还有个属性:word-wrap:break-word; 这咋还出现重复属性了呢?
其实不然,又是一通查找资料,发现这俩还是有区别的:
1) word-wrap : break-word ;
--允许长单词换行到下一行。
当一个单词长度超过li的宽度时,默认是不会换行的:如下图
如果设置word-wrap : break-word; 这个单词就会进行换行显示
2)word-break : break-all;
-- 是否对单词进行断词处理。
--个人理解就是: 它会把一个单词的每个字母拆分成独立的单元,
这样就可以把它填充到每个地方,所以才能达到文字环绕图片的效果。
以上这篇css文字环绕图片—遇到的问题及快速解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持开心学习网。
热门推荐
- laravel初始化(Laravel 登录后清空COOKIE的操作方法)
- host切换工具SwitchHosts
- laravel跨域设置(解决Laravel自定义类引入和命名空间的问题)
- 用php实现弹出消息提示框(php弹出提示框的是实例写法)
- C#中is 运算符与as运算符的区别和作用
- 怎么搭建个人云服务器(怎么使用云服务器搭建个人网站?)
- shell监控docker各种状态(如何监控docker容器运行状态 shell 脚本)
- dockertomcat多开实例(Docker tomcat的设置内存大小配置方式)
- 如何使用docker部署(使用远程Docker进行集成测试的环境搭建过程)
- python连接到本地的mysql数据库(Python实现连接MySql数据库及增删改查操作详解)