这两个东西是什么,我相信至今还有很多人搞不清,只会死记硬背的写一个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. July 12th, 2018. Thursday, Week 28th.

    People love what other people are passionate about. 人总是会爱上别人倾注热情的事物. From La La Land. This quote has ...

  2. Linux新手随手笔记1.4

    计划任务服务程序 计划任务 at  命令          一次性的 crond  服务   周期性的 23:29执行reboot命令(重启服务器) at -l      查看当前的计划任务 at  ...

  3. win 10 精简组件列表

    轻松访问工具 操作中心 应用程序虚拟化(App-V) Telemetry Client (Asimov)(遥测) Assigned Access(按需访问) 自动播放 网络后台传输 备份 生物识别服务 ...

  4. 【续】5年后,我们为什么要从 Entity Framework 转到 Dapper 工具?

    前言 上一篇文章收获了 140 多条评论,这是我们始料未及的. 向来有争议的话题都是公说公的理,婆说婆的理,Entity Framework的爱好者对此可以说是嗤之以鼻,不屑一顾,而Dapper爱好者 ...

  5. SIM 800C指令笔记

    拨号ATD137xxxxxxxx; 挂断-对方挂断收到NO CARRIER消息 挂断-主动挂断ATH 接电话ATA 打入电话消息RING 设置来电电话号码显示AT+CLIP=1显示消息格式:+CLIP ...

  6. springmvc上传文件错误The current request is not a multipart request

    <1>在jsp页面的<head></head>标签里面加上<meta http-equiv="Content-Type" content= ...

  7. C#类继承中构造函数的执行序列

    不知道大家在使用继承的过程中有木有遇到过调用构造函数时没有按照我们预期的那样执行呢?一般情况下,出现这样的问题往往是因为类继承结构中的某个基类没有被正确实例化,或者没有正确给基类构造函数提供信息,如果 ...

  8. Springcloud zuul和shiro结合

    一.目标1.外部请求统一从网关zuul进入,并且服务内部互相调用接口要校验权限 2.cloud和shiro结合,达到单点登录,和集中一个服务完成权限管理,其他业务服务不需要关注权限如何实现 3.其他服 ...

  9. 使用python抓取数据之菜鸟爬虫1

    ''' Created on 2018-5-27 @author: yaoshuangqi ''' #本代码获取百度乐彩网站上的信息,只获取最近100期的双色球 import urllib.reque ...

  10. Spring自动注入之@Autowired、@Resource、@Inject

    相同点: 三者都支持对spring bean的自动注入 不同点: ①Autowired按照类型进行注入( Bean bean = applicationContext.getBean(Bean.cla ...