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则不会把长单词放在一个新行里，当这一行放不下的时候就直接强制断句了。

 <!DOCTYPE html>
<p style="background:#000; width:100px; color:#F00; word-wrap:break-word" data-mce-style="background: #000; width: 100px; color: #f00; word-wrap: break-word;">
haha 555555555555555555555555555555555
</p>
<p style="background:#000; width:100px; color:#F00; margin-top:10px; word-break:break-all" data-mce-style="background: #000; width: 100px; color: #f00; margin-top: 10px; word-break: break-all;">
haha 555555555555555555555555555555555
</p>

　　

转自：http://www.cnblogs.com/2050/archive/2012/08/10/2632256.html

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. return和break的区别

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

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

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

  8. day5 continue 和 break的区别

    # continue num = 1 while num <=10: num += 1 if num == 3: continue print(num) # continue 表示跳出本次循环后 ...

  9. 利用模板导出文件（二）之jacob利用word模板导出word文件（Java2word）

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

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

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

随机推荐

  1. ListControl的用法

    ListControl 控件可在窗体中管理和显示列 表项.可控制列表内容的显示方式,能够以图标和表格的形式显示数据.打开ListControl控件的属性窗口,在Styles选项卡中的View属性中 可 ...

  2. Reporting Service服务SharePoint集成模式安装配置（9、PowerPivot for SharePoint 安装配置详细）

    PowerPivot for SharePoint 增加了对发布到 SharePoint 中的 PowerPivot 工作簿的协作和文档管理支持. PowerPivot for SharePoint ...

  3. ifstat命令行统计网络流量

      下载 ifstat ,  http://gael.roualland.free.fr/ifstat/ifstat-1.1.tar.gz   tar xzvf ifstat-1.1.tar.gz   ...

  4. c#设计模式系类：亨元模式

    一.引言 在软件开发过程中,如果我们需要重复使用某个对象的时候,如果我们重复地使用new创建这个对象的话,这样我们在内存就需要多次去申请内存空间了,这样可能出现内存使用越来越多的情况,这样的问题是非常 ...

  5. django model项目外操作

    方法1: python manage.py shell 然后import对应的model并操作 方法2: 新建py脚本 import sys import os pwd = os.path.dirna ...

  6. jquery 全选反选 .prop('checked',!$(this).is(':checked'));

    //废话不说直接上代码 $("#").click(function(){ $("#content-div label input[type='checkbox']&quo ...

  7. C#中数组作为参数传递的问题

    原则:尽可能控制对数据的修改,如果可以预测某个数据不会或不应该被改变,就要对其控制,而不要期望使用这个数据的调用者不会改变其值. 如果参数在使用过程中被意外修改,将会带来不可预知的结果,而且这种错误很 ...

  8. ajax 多个setInterval进行ajax请求的页面长时间打开会出现页面卡死问题

     多个setInterval进行ajax请求的页面长时间打开会出现页面卡死问题 浏览器的渲染(UI)线程和js线程是互斥的,在执行js耗时操作时,页面渲染会被阻塞掉.当我们执行异步ajax的时候没有问 ...

  9. Python扫描邮件主题，并打印

    import imaplib import email from email.header import decode_header import datetime if __name__ == '_ ...

  10. 《Think in Java》17~18

    chapter 17 容器深入研究 填充容器 package cn.test; import java.util.ArrayList; import java.util.Collections; im ...