一、前言

需要实现一个文字环绕图片的效果,心想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的区别吗?

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

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

    原文: https://blog.csdn.net/yiyelanxin/article/details/75006925 在一个图文并茂的网页上,文字环绕图片可以使布局美观紧凑,如何实现呢?有两种办 ...

  2. html小知识点汇总(浏览器导航上显示图标、div无高度时试着清除浮动、文字环绕图片、字体加粗、div按百分比分、已有的不合适的class,针对特定的标签进行修改)

    1.新点击的网页,在浏览器导航上显示图标: 像这种效果: <head> <meta charset="UTF-8"> <meta name=" ...

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

    本篇主要包括: ■  添加独立的一行■  文字环绕■  图片自适应■  隐藏元素 添加独立的一行 在id为body的section和id为main的section之间,添加2张图片. 我们发现,新加的 ...

  4. wps如何设置文字环绕图片

    wps在编辑一些文字的时候,经常会插入一些图片,但是插入图片后,文字和图片就被分离开来,整体显得没有那么美观整洁,这个时候就用到了软件的文字环绕功能,那么具体如何设置呢,接下来看教程. 首先打开wps ...

  5. ubuntu下Chrome谷歌浏览器部分网站图片显示不正常的解决方法

    title: ubuntu下Chrome谷歌浏览器部分网站图片显示不正常的解决方法 toc: false date: 2018-09-02 14:37:26 categories: methods t ...

  6. WPF图片放大后模糊的解决方法

    原文:WPF图片放大后模糊的解决方法 WPF中显示图片的方式很多,可以用Image控件来显示图像,或者直接设置一个控件的Background.图片的放大也很简单,直接设置显示图片的控件的Width和H ...

  7. 织梦DEDECMS更换目录后页面内的图片和缩略图无法显示解决方法

    http://www.win8f.com/seoyouhua/6609.html 很多人碰到织梦更换目录后内容图片和缩略图无法显示的问题,在此,慧鸿网络特地搜集整理了一篇关于织梦出现缩略图和内容无法显 ...

  8. phpcms v9图片生成缩略图变成黑色解决方法

    今天客户反映,上传的图片生成缩略图有的图片变成黑色,出现问题就百度了一下,有不少网友也遇到这样的问题,但是官方论坛也没有给出解决办法,那还得靠自己解决了,于是就研究phpcms v9 图片压缩代码.打 ...

  9. 只有图片拼接的html页面图片之间有白条的解决方法

    有时候会有这样的页面,整个页面也就是几张切好的图片组成,但是把这些图片使用代码拼接好,又总会出现图片间有白条的问题,如下图: 解决方法:给图片的父容器添加 line-height: 0; 就好了,因为 ...

随机推荐

  1. 【BZOJ2654】tree

    Time Limit: 30 Sec Memory Limit: 512 MB Description ​ 给你一个无向带权连通图,每条边是黑色或白色.让你求一棵最小权的恰好有need条白色边的生成树 ...

  2. 洛谷 P5105 不强制在线的动态快速排序

    P5105 不强制在线的动态快速排序 题目背景 曦月最近学会了快速排序,但是她很快地想到了,如果要动态地排序,那要怎么办呢? 题目描述 为了研究这个问题,曦月提出了一个十分简单的问题 曦月希望维护一个 ...

  3. spark 性能调优(一) 性能调优的本质、spark资源使用原理、调优要点分析

    转载:http://www.cnblogs.com/jcchoiling/p/6440709.html 一.大数据性能调优的本质 编程的时候发现一个惊人的规律,软件是不存在的!所有编程高手级别的人无论 ...

  4. 21天实战caffe笔记_第一天

    1 深度学习术语 深度学习常用名词:有监督学习.无监督学习.训练数据集.测试数据集.过拟合.泛化.惩罚值(损失loss); 机器自动学习所需三份数据:训练集(机器学习的样例),验证集(机器学习阶段,用 ...

  5. 使用MyEclipse 2014创建项目

    1. 打开MyEclipse 2014,如果是第一次运行,会提示设置workspace路径,如图: WorkSpace路径是指日后你自己利用MyEclipse创建项目时,项目文件的存放路径.通常不要放 ...

  6. 一次ajax请求导致status为canceled的原因小记

    偶然碰到一个小Bug ajax请求执行后返回了一个canceled(状态码) 但是后台却接受了参数并且执行成功0.0 刚看到这个状态的时候是一脸懵逼的.... 之前并没见过这样的状态码 经过参数确认并 ...

  7. mysql 对应 binlog 查看

    什么是 binlog binlog,即二进制日志,它记录了数据库上的所有改变. 改变数据库的SQL语句执行结束时,将在binlog的末尾写入一条记录,同时通知语句解析器,语句执行完毕. binlog格 ...

  8. html5 +css3 点击后水波纹扩散效果 兼容移动端

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. 科学计算三维可视化---TraitsUI(配置视图)

    配置视图 模态窗口: from traits.api import HasTraits,Int,Strclass ModelManager(HasTraits): model_name = Str c ...

  10. git push时报错fatal: Could not read from remote repository.

    后来发现,出现这个问题是因为仓库地址不对 使用如下命令先查看一下: $ git remote -v 发现跟github的地址不一致 然后在终端输入:git remote set-url origin ...