这两个东西是什么,我相信至今还有很多人搞不清,只会死记硬背的写一个word-wrap:break-word;word-break:break-all;这样的东西来强制断句,又或者是因为这两个东西实在是太拗口了,长得又差不多,导致连背都很难背下来。

那它们到底是什么呢?我在mozilla的官网上找到如下的解释:

word-wrap

word-break

我们看到两个解释中都出现了 break lines within words 这样的词汇,说明它们都跟单词内断句又关。然后我们试着翻译一下上面的两段英文:

word-wrap:

css的 word-wrap 属性用来标明是否允许浏览器在单词内进行断句,这是为了防止当一个字符串太长而找不到它的自然断句点时产生溢出现象。

word-break:

css的 word-break 属性用来标明怎么样进行单词内的断句。

貌似从上面两个读着都蛋疼的翻译中找到了一些区别:word-wrap 强调的是是否允许单词内断句,而word-break强调的则是怎么样来进行单词内的断句。

说到这里,好像依然不是很明朗,好吧,表达能力差的孩纸真是伤不起啊,只能用些实例来补救了。

首先,何谓单词内断句?当然这里指的都是西文单词。

这是没有单词内断句的情况,我们看到那个单词是在是太长了,所以它溢出了包裹它的容器。

这是进行了单词内断句的情况,就是一个单词被断作了两行。

先要明确一点,不加word-wrap或word-break的时候,就是浏览器默认的时候,如果有一个单词很长,导致一行中剩下的空间已经放不下它时,则浏览器会把这个单词挪到下一行去:

word..d 这个我们创造出来的单词本来应该紧接在 long 后面的,但是long后剩下的空间已经不够了,而单词默认是不能断开的,所以浏览器就只好把它屈尊下移了。

这个长单词还不算变态的,因为至少它没有长到超过包裹它的元素的长度,但是如果超过了呢?

如果超过了就像前面我们提到过的,它会溢出它的父容器外,因为这时它是不允许被截断的,那就只能冲出去咯。

这个时候word-wrap就能派上用场了。我们给这段文字加上word-wrap:break-word看看会怎么样

哈哈,你给我滚回去吧,变态的长单词,即使你断了也无所谓。

这样,为了防止长单词溢出,就在它的内部断句了。这就是 word-wrap:break-word 的功能。

在看看word-wrap的浏览器支持情况:

很好,几乎所有浏览器都支持。

好吧,你现在可以说了,都有了word-wrap这个东西,那还要 word-break 来干什么鸟?

万恶的资本家总是想要榨干劳动者的一切,你看,下图中的long后面不是还有一段空间吗,难道就这样放着?太浪费了。。。

是啊,long后面那里足可以放好几个短的单词了,都是那个臭变态的长单词!

所以IE真的很体贴,不要再骂它啦,考虑到不浪费一点点空间的问题,它创造出了 word-break 这个东西。现在我们来看看使用 word-break:break-all; 后会怎么样。

看看发生什么了?那个变态的长单词并没有被挪到下一行,而是直接放在了long后面,然后在父容器的右边界断开了。所以,它没有浪费空间了哦。

再看下word-break:break-all的浏览器支持情况:

除了opera外,其他都支持耶(火狐也从不支持改为支持了)!

最开始我们说了,word-wrap 是用来决定允不允许单词内断句的,如果不允许的话长单词就会溢出。最重要的一点是它还是会首先尝试挪到下一行,看看下一行的宽度够不够,不够的话就进行单词内的断句。

而word-break:break-all则更变态,因为它断句的方式非常粗暴,它不会尝试把长单词挪到下一行,而是直接进行单词内的断句。这也可以解释为什么说它的作用是决定用什么方式来断句的,那就是——用了word-break:break-all,就等于使用粗暴方式来断句了。总之一句话,如果您想更节省空间,那就用word-break:break-all就对了!

但无论如何,单词内的断句都会对西文的可读性产生一定的影响,有时候这点就要注意了。

ps:网上有些文章说,word-wrap:break-word 对长串英文不起作用,其实这是非常错误的,word-wrap:break-word照样能把一个长串英文或数字拆成多行。事实上,word-wrap:break-word与word-break:break-all共同点是都能把长单词强行断句,不同点是word-wrap:break-word会首先起一个新行来放置长单词,新的行还是放不下这个长单词则会对长单词进行强制断句;而word-break:break-all则不会把长单词放在一个新行里,当这一行放不下的时候就直接强制断句了。

你真的了解word-wrap和word-break的区别吗?的更多相关文章

  1. word break和word wrap

    默认情况下,如果同一行中某个单词太长了,它就会被默认移动到下一行去: word break(normal | break-all | keep-all):表示断词的方式 word wrap(norma ...

  2. word wrap 解惑

    源起 我们经常需要“修复”一个老生常谈的“bug”,那就是文本的自动换行问题.在专业术语上,这种期望得到的渲染现象被称作“word wrap”,即文本处理器有能力把超出页边的整个词自动传到下一行. 在 ...

  3. POI 读取word (word 2003 和 word 2007) (转)

    最近在给客户做系统的时候,用户提出需求,要能够导入 word 文件,现在 microsoft word 有好几个版本 97.2003.2007的,这三个版本存储数据的格式上都有相当大的差别,而现在 9 ...

  4. JSP利用freemarker生成基于word模板的word文档

    利用freemarker生成基于word模板的word文档 freemarker简介 FreeMarker是一个用Java语言编写的模板引擎,它基于模板来生成文本输出.FreeMarker与Web容器 ...

  5. 【jacob word】使用jacob,合并多个word为一个word文件

    将几个word文件合并到一个word文件,使用注意点: 1.后面附项目运用的jar包jacob-1.9, 2.并且jacob运用中,需要将附件内的jacob.dll放到windows/system32 ...

  6. 使用Word API打开Word文档 ASP.NET编程中常用到的27个函数集

    使用Word API(非Openxml)打开Word文档简单示例(必须安装Word) 首先需要引入参照Microsoft.Office.Interop.Word 代码示例如下: public void ...

  7. 利用模板导出文件(二)之jacob利用word模板导出word文件(Java2word)

    https://blog.csdn.net/Fishroad/article/details/47951061?locationNum=2&fps=1 先下载jacob.jar包.解压后将ja ...

  8. 生成word附件和word域动态赋值

    生成word文档和word域动态赋值,很多时候需要生成这样的word文档供下载和打印,先制作一个包含了域的 word的模板附件,放在服务器端或者字节流存入数据库,以供需要的时候代码可以获取到,如: 其 ...

  9. POI 读取word (word 2003 和 word 2007)(转,好用)

    POI 读取word (word 2003 和 word 2007)(转,好用) 转做的操作: 将作者文中失效的链接的正确链接放在失效链接的下面. 最近在给客户做系统的时候,用户提出需求,要能够导入 ...

  10. return和break的区别

    /* Name:return和break的区别 Copyright: By.不懂网络 Author: Yangbin Date:2014年2月25日 02:13:22 Description:以下代码 ...

随机推荐

  1. ASP.NET Core 下的依赖注入(一)

    本文介绍利用 Microsoft.Extensions.Configuration.Binder.dll 来实现超级简单的注入. 1. appsettings.json 中定义配置 假设我们有如下配置 ...

  2. 《你必须掌握的Entity Framework 6.x与Core 2.0》正式出版感想

    前言 借书正式出版之际,完整回顾下从写博客到写书整个历程,也算是对自己近三年在技术上的一个总结,整个历程可通过三个万万没想到来概括,请耐心阅读. 写博.写书完整历程回顾 从2013年12月注册博客园账 ...

  3. 在oracle表中增加字段,并调整字段的顺序

    增加字段的语句很简单,以用户身份连接oracle服务: alter table tablename add(colname coltype); # 填上表名.字段名.字段类型 修改字段顺序前,查看表中 ...

  4. Docker 核心技术之仓库

    Docker 仓库简介 什么是Docker仓库 Docker仓库就是存放docker镜像并有docker pull方法下载的云环境 Docker仓库分为公有仓库和私有仓库. 公有仓库指Docker H ...

  5. 一入OI深似海 4 —— 纪念我最后一次PJ(中)

    不知道怎么回事,直到比赛前10分钟才放我们进考场. 考场在体育馆里面,很大很壮观. 我匆匆忙忙地找到位子,屁股还没坐热,被老师告知不能带水. what?! 于是我只好把水放在统一放私人物品的地方. 电 ...

  6. HDU 2174 Bridged Marble Rings

    题目:Bridged Marble Rings 链接:http://acm.hdu.edu.cn/showproblem.php?pid=2174 题意:如图,要把所有灰色球移动到上圈,每次操作可以转 ...

  7. PowerDesigner 批量添加字段

    Option Explicit Dim mdl ' the current model Set mdl = ActiveModel Dim Tab 'running table Dim col_1 D ...

  8. Python——内置函数

    一.min函数 取当前字符串的最小字符串 s1 = min(strs) 二.max函数 取当前字符串的最大字符串 s1 = max(strs) 三.enumerate函数 函数用于将一个可遍历的数据对 ...

  9. C语言博客作业03--函数

    1.本章学习总结 1.1 思维导图 1.2 本章学习体会及代码量学习体会 1.2.1 学习体会 这周最大的收获就是学习函数,并且通过对函数的封装来做成一个简单的小程序,这周做的最有意义的事情就是做了老 ...

  10. BUGKU Misc 普通的二维码

    下载的文件是一个bmp文件,在我的印象中bmp好像没有什么隐写技巧,有些慌张. 既然是二维码,那不妨先扫一下试一试 哈哈!就不告诉你flag在这里! 嗯,意料之中 1首先我把它放到了stegosolv ...