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

一、前言

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

1)代码部分

   <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;

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

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

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

有篇文章对这两者的区别做了很好的介绍:《你真的了解word-wrap和word-break的区别吗?

时间: 2024-10-12 19:41:27

css文字环绕图片--遇到的问题及解决方法的相关文章

CSS文字环绕图片 图文混排效果

CSS实现文字环绕图片效果,也就是大家常见到的文中图效果,比如文字会自动围绕一个方块状的图片广告,这一切都是自动的,不需要另外排版,对此有需要有网页,可借鉴本代码,主要是利用CSS的clear属性实现. <html> <head> <title>CSS文字环绕图片 图文混排效果丨石家庄电缆附件</title> </head> <body> <div style="float:left;"> <di

CSS文字环绕图片,文中图效果

<html> <head> <title>CSS文字环绕图片</title> </head> <body> <div style="float:left;"> <div style="float:left;height:100px;width:1px;"> </div> <div style="float:left;height:230px;w

HTML/CSS实现文字环绕图片布局

原文: https://blog.csdn.net/yiyelanxin/article/details/75006925 在一个图文并茂的网页上,文字环绕图片可以使布局美观紧凑,如何实现呢?有两种办法:1.利用图片属性实现代码如下: <p style="width:400px;"> <img src="images/bkjj.jpg" align="right" width="120" hspace=&qu

Bootstrap 3之美03-独立行,文字环绕,图片自适应,隐藏元素

本篇主要包括: ■  添加独立的一行■  文字环绕■  图片自适应■  隐藏元素 添加独立的一行 在id为body的section和id为main的section之间,添加2张图片. 我们发现,新加的2张图片把主体内容挤到了右侧. 那么,我们如何处理新加的2张图片呢?--我们不太可能用container,因为它是页面布局层面的类名.但我们可以把这2张图片放在class名为row的div中. 我们还可以加更多的图片. 现在的图片还没有居中.考虑到总共有12个单元格,而4张图片只占了8个单元格,还空

IE8升级新版Flash Player ActiveX14导致的discuz图片附件无法上传 解决方法

之前发的这篇文章被编辑之后丢失了,无奈从百度快照找来重新发布,不知道csdn抽啥风 架不住sb adobe的频繁升级提示,手欠升级到了了flash player 14,结果IE8下所有discuz论坛中都无法看到上传图片的按钮了 没办法,遇到问题就解决吧 刚好在解决IE11遇到编辑器不显示问题的时候看到discuz编辑器文件上传有非flash解决方案 所以这个问题看上去就不难了,把普通上传给打开就行了 编辑discuz文件/template/default/forum/editor_menu_f

图片间有空隙的解决方法

定制页面时遇到图片间有空隙的问题,google: 在li中纯放图片img,出现的bug是图片之间有3px的间隙,给li加高度也无效,解决图片间有空隙方法如下: 直接加样式img{vertical-align:bottom; display:block} 当然在某些情况下无效,比如我要加三个图片,上中下,中间的图片是设为背景,发现用此方法无效,只是上和中的图片空隙没了,而下与中之间还存在,方法很简单,把vertical-align:bottom改成top,可根据自己遇到的不同情况来设vertica

python 文字转语音包pyttsx安装出错解决方法

pyttsx的python的文字转语音的包,但是pyttsx的官方网站上资源只更新2012年,所以在py3中使用pip install pyttsx或者下载安装包进行安装时,虽然可以安装成功,但是import时候会出问题. 会显示导入出错. 解决方法:

css ie7中overflow:hidden失效问题及解决方法

css兼容ie7: 做页面的时候用负边距居中的时候在IE7下面,父节点中的overflow:hiden失效的问题,查阅了一些资料,总结一下解决方法. 问题原因: 当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:hidden属性就会失效. 解决方法: 我们在IE7内发现子元素会超出父元素设定的高度,即使父元素设置了overflow:hidden. 解决这个bug很简单,在父元素中使用position:relative;即可解决该bug

css基础 float img 实现文字环绕图片的效果

礼悟:    公恒学思合行悟,尊师重道存感恩.叶见寻根三返一,江河湖海同一体.          虚怀若谷良心主,愿行无悔给最苦.读书锻炼养身心,诚劝且行且珍惜.              ide:visual studio 2017             browser:Chrome                     os:win7 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8&qu