一、前言

需要实现一个文字环绕图片的效果,心想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. 毕业设计预习:VHDL入门知识学习(一) VHDL程序基本结构

    VHDL入门知识学习(一) VHDL程序基本结构 简介 VHDL程序基本结构 简介 概念: HDL-Hardware Description Language-硬件描述语言-描述硬件电路的功能.信号连 ...

  2. 响应式开发(六)-----Bootstrap CSS----------Bootstrap文本排版

    Bootstrap 使用 Helvetica Neue. Helvetica. Arial 和 sans-serif 作为其默认的字体栈.使用 Bootstrap 的排版特性,您可以创建标题.段落.列 ...

  3. 学习操作Mac OS 之安装工具组件

    视频软件: MPlayerX 安装MySQL: 下载MySQL: https://dev.mysql.com/downloads/installer/ 设置环境变量:http://www.cnblog ...

  4. Git 常用操作(二)

    第一次传数据:echo "# miya" >> README.mdgit initgit add README.mdgit commit -m "first ...

  5. java多线程 -- Condition 控制线程通信

    Api文档如此定义: Condition 将 Object 监视器方法(wait.notify 和 notifyAll)分解成截然不同的对象,以便通过将这些对象与任意 Lock 实现组合使用,为每个对 ...

  6. D. Vitya and Strange Lesson Codeforces Round #430 (Div. 2)

    http://codeforces.com/contest/842/problem/D 树 二进制(路径,每个节点代表一位) #include <cstdio> #include < ...

  7. 利用ansible来做tomcat应用的持续交付

    https://www.jianshu.com/p/fca8f91ae223 在做持续交付这件事,想必大家都是用jenkins这款程序来做基石.当然,我们这次也是用jenkins作为承载工具,jenk ...

  8. 转:UIView的sizeToFit与sizeThatFits

    UILabel经常用到的方法- (void)sizeToFit- (CGSize)sizeThatFits:(CGSize)size解释如下: sizeToFit会自动调用sizeThatFits方法 ...

  9. 科学计算三维可视化---Mayavi入门(Mayavi介绍和安装)

    Mayavi介绍 是基于VTK开发的可视化软件(更加高效),Mayavi完全由python编写,方便使用,而且可以使用python编写扩展,嵌入到用户程序中 安装要求 VTK >pip3 ins ...

  10. Redis学习九:Redis的发布订阅

    发布订阅功能,redis也具备,但是要知道的是redis主要功能还是分布式的缓存功能,因此这种订阅发布功能很少用,有专门的kafka  activemq 等消息中间件来完成,因此本文只是简单介绍,了解 ...