break-word会对过长的单词做词内断词处理，这样单词始终会在容器中，不会溢出容器
 break-all很暴力的一种处理方法，过长单词先断词处理，占满一行，然后再换行处理
 
 
每次看到这两个css属性都是一种眼晕的感觉，今天就来总结一下。
 
首先我们来来分别介绍一下这两个属性有哪些值：
 
word-break:
 
值
描述
break-all
允许单词内换行
keep-all     
只在半角或连字符处换行（兼容性不好）
normal
默认
 
 
word-wrap:
 
值
描述
break-word
在长单词或者URL的地址内部进行换行
normal
只允许断字处换行，默认
 
 
因为word-break:keep-all兼容性不好，所以不推荐使用。因此两者的主要区别还是在于break-all与break-word。
 
从字面意思上看区别显而易见：
 
 
break-word会对过长的单词做词内断词处理，这样单词始终会在容器中，不会溢出容器，
 
 
break-all很暴力的一种处理方法，过长单词先断词处理，占满一行，然后再换行处理，然而这样解释还不是太清晰。那就写一个demo看一下效果。
 
 
 
 
 
同时说明一下，英文默认是不换行的,会造成溢出。
 中文会默认换行，如果要不换行则需要设置：white-space:nowrap;
 chrome浏览器中的中文标点不能位于一行的开头，因此会将标点的前一个字也换行,如果前一个也是标点依次往前找，直到找到不是标点的那个字为止（如每个例子的第一行）;
 中文遇英文，如果一行容不下则英文直接整段换行（例第二个demo的第二行）；
 
 
本篇到此结束，如有不足，之后再进行补充。
 
 
 
我的个人博客,有空来坐坐
 

目录
 
一、介绍
 
二、word-break
 
2.1、normal
 
2.2、break-all
 
2.3、keep-all
 
2.3、break-word
 
三、overflow-wrap
 
参考
 

一、介绍
 
今天学习markdown时，遇到了一个概念，“hard-wrapped”，然后网上搜索，发现一堆名词，如：line break、word wrapping、word wrap、line wrap？？？啥东东？头都大了。最后发现它们只是概念模糊，但是想表达的无非就是软换行和硬换行。软换行有两种方式，其中就是自动换行，自动换行涉及到一个word-wrap的概念。word-wrap指的是内容要超出该行范围时，具体如何换行。
 
接下来讨论的就是css中的word-break和word-wrap（overflow-wrap）样式，如果不懂的，先了解一下换行的概念，请参考我的博客：Line breaking 换行
 
至于其他的比如hyphens  样式，这里不讨论了，毕竟中文环境下，用不到了吧。。 
 
二、word-break
 
html中文本可以自动换行，而word-break则规定哪里自动换行，word-break默认normal，下面给出所有取值：
 
Value
Description
normal
Default value. Uses default line break rules
break-all
To prevent overflow, word may be broken at any character
keep-all 
Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as value "normal"。也就是中文不自动换行了，而英文使用默认换行方式
break-word
To prevent overflow, word may be broken at arbitrary points。这是不是标准化的值，因此才会出现word-wrap（overflow-wrap）
initial
Sets this property to its default value. Read about initial
inherit
Inherits this property from its parent element. Read about inherit
2.1、normal
 
使用默认值，那么会默认在word（汉字）或者标点符号后换行。但是对于英文来说，有些单词很长以至于即使换行也容纳不下时，还是会溢出的。而汉字也就占两个字节，还是放得下的。
 
 
2.2、break-all
 
对于中文没啥影响，英文的话，如果溢出时可以在任何地方换行，包括在单词内的某个位置换行。下图已用不同颜色标注了3个单词，发现快溢出时就换行了，不管是在什么位置。
 
 
2.3、keep-all
 
中文不自动换行，英文表现出和normal一样的行为
 
 
2.3、break-word
 
可以发现，normal模式下，单词过长会溢出，但是break-word模式下，单词过长就在单词内换行。注意，该值未列入标准。
 
 
三、overflow-wrap
 
overflow-wrap原先名做word-wrap，后被改名为overflow-wrap，word-wrap作为别名。默认normal值，可选break-word，就是因为word-break的break-word未列入标准，才会一般使用overflow-wrap的break-word值。效果和word-wrap的break-word一样。
 
 
 
参考
 
Line breaking 换行:https://blog.csdn.net/jdbdh/article/details/83685804
 
word-break:https://developer.mozilla.org/en-US/docs/Web/CSS/word-break
 
overflow-wrap：https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
 
word-break：https://www.w3schools.com/cssref/css3_pr_word-break.asp
 
word-wrap：https://www.w3schools.com/cssref/css3_pr_word-wrap.asp
 
 
 
 
 
 
 
 
 
 
 
 

在div中，文本布局经常出现，换行混乱的情况。 

 问题表现：1.如果是全英文字符串,中间不包含任何符号(包括空格)，不自动换行. 
                  2.中英文混写，则在英文字符串的开始处换行（英文长度>div长度），结尾处不换行。 
                  3.英文整个单词换行。等等，可能还有一些问题，这里只列出了常见的几个； 

 介绍上面几个css属性功能的简单用法； 
 word-wrap:normal    |   break-word; 
              normal:默认的属性值.（允许内容顶开指定的容器边界）. 
               break-word:内容将在边界内换行(有一些文章里面说:将截断英文单词换行,这是错误的说法，此属性没有这个功能，下面的属性才具备了这个功能。) 
 word-break:normal    |   break-all    |    keep-all 
               normal:如果是中文则到边界处的汉字换行,如果是英文整个词换行,注意:如果出现某个英文字符串长度超过边界,则后面的部分将撑开边框,如果边框为固定属性,则后面部分将无法显示. 
              break-all : 强行换行,将截断英文单词 
              keep-all : 　不允许字断开。如果是中文将把前后标点符号内的一个汉字短语整个换行,英文单词也整个换行,注意:如果出现某个英文.字符串长度超过边界,则后面的部分将撑开边框,如果边框为固定属性,则后面部分将无法显示. 
 text-overflow:ellipsis   超过width部分就强制用...表示未完; 
 white-space: nowrap    让内容不折行 
 （层中放一个表格，如果层的float：none  则表格和层间会有空隙，这种问题的解决办法是在层的style里面加上white-space: nowrap）

 使用方式: 

 一般情况下: 
 
.body{ 

       word-wrap:break-word; 

       word-break:keep-all; 

       overflow:hidden; 

} 



.css{

      text-overflow:ellipsis;

      white-space:nowrap;

      overflow:hidden;

}
 
 

word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。

 它们的区别就在于：

 1，word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。

 2，word-wrap:break-word 例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。

 word-break;break-all 支持版本：IE5以上 该行为与亚洲语言的 normal 相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本。

 WORD-WRAP:break-word 支持版本：IE5.5以上 内容将在边界内换行。如果需要，词内换行( word-break )也将发生。

 还有，我在做KingCMS模板的时候，碰到easyarticle[list]（此为5.0版本所含文件）页面。这个页面是个文章列表，其中有个 (king:description size="200"/)的标签，也就是说其描述是200个字符，因为默认的模板比内容div容器比较大，所以能正常显示，但当size设置为400的时候，超过内容div容器的时候，右栏的内容就会被顶到下面去，所以这时候在class中设置下word-wrap: break-word;就可以解决这个问题了。

 
  
 
  
 
 
 
  
 
 
 
 word-wrap同break-word的区别 (2008-08-19 11:18:56)
 
 
 
div this english h1 and 亚洲 
分类：程序开发
 
 
 
 
 word-wrap同break-word的区别
 
 
 word-wrap:
 normal  Default. Content exceeds the boundaries of its  Container.
 break-word Content wraps to next line, and a word-break occurs when necessary. 必要时会触发word-break。
 
 
 break-word:
 normal  Default. Allows line breaking within words. 好像是只对Asian text起作用。
 break-all Behaves the same as normal for Asian text, yet allows the line to break arbitrarily for non-Asian text. This value is suited to Asian text that contains some excerpts of non-Asian text.
 keep-all Does not allow word breaking for Chinese, Japanese, and Korean. Functions the same way as normal for all non-Asian languages. This value is optimized for text that includes small amounts of Chinese, Japanese, or Korean.
 
 
 总结如下：
 word-wrap是控制换行的。
 使用break-word时，是将强制换行。中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。
 
 
 break-word是控制是否断词的。
 normal是默认情况，英文单词不被拆开。
 break-all，是断开单词。在单词到边界时，下个字母自动到下一行。主要解决了长串英文的问题。
 keep-all，是指Chinese, Japanese, and Korean不断词。即只用此时，不用word-wrap，中文就不会换行了。（英文语句正常。）
 
 
 
 ie下：
 使用word-wrap:break-word;所有的都正常。
 
 
 ff下：
 如这2个都不用的话，中文不会出任何问题。英文语句也不会出问题。但是，长串英文会出问题。
 为了解决长串英文，一般用word-wrap:break-word;word-break:break-all;。但是，此方式会导致，普通的英文语句中的单词会被断开（ie下也是）。
 
 
 目前主要的问题存在于 长串英文 和 英文单词被断开。其实长串英文就是一个比较长的单词而已。
 即英文单词应不应该被断开那？那问题很明显了，显然不应该被断开了。
 对于长串英文，就是恶意的东西，自然不用去管了。但是，也要想些办法，不让它把容器撑大。
 用：overflow:auto; ie下，长串会自动折行。ff下，长串会被遮盖。
 
 
 
 所以，综上，最好的方式是word-wrap:break-word;overflow:hidden;而不是word-wrap:break-word;word-break:break-all;。
 word-wrap:break-word;overflow:auto;在ie下没有任何问题。在ff下，长串会被遮住部分内容。
 
 
 另，测试代码如下：
 
 
 1.htm===================================================================
 
 
 <style>
 .c1{ width:300px;  border:1px solid red}
 .c2{ width:300px;word-wrap:break-word;  border:1px solid yellow}
 .c3{ width:300px;word-wrap:break-word;word-break:break-all;  border:1px solid green}
 .c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}
 .c5{ width:300px;word-break:break-all;  border:1px solid black}
 .c6{ width:300px;word-break:keep-all;  border:1px solid red}
 .c7{ width:300px;word-wrap:break-word;overflow:auto;  border:1px solid yellow}
 </style>
 
 
 .c1{ width:300px;  border:1px solid red}
 <div class="c1">
 safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
 </div>
 <div class=c1>
 This is all English. This is all English. This is all English.
 </div>
 <div class=c1>
 全是中文的情况。全是中文的情况。全是中文的情况。
 </div>
 <div class=c1>
 中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
 </div>
 
 
 <br>
 .c2{ width:300px;word-wrap:break-word; border:1px solid yellow}
 <div class="c2">
 safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
 </div>
 <div class=c2>
 This is all English. This is all English. This is all English.
 </div>
 <div class=c2>
 全是中文的情况。全是中文的情况。全是中文的情况。
 </div>
 <div class=c2>
 中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
 </div>
 
 
 <br>
 .c3{ width:300px;word-wrap:break-word;word-break:break-all;  border:1px solid green}
 <div class="c3">
 safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
 </div>
 <div class=c3>
 This is all English. This is all English. This is all English.
 </div>
 <div class=c3>
 全是中文的情况。全是中文的情况。全是中文的情况。
 </div>
 <div class=c3>
 中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
 </div>
 
 
 <br>
 .c4{ width:300px;word-wrap:break-word;word-break:keep-all; border:1px solid blue}
 <div class="c4">
 safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
 </div>
 <div class=c4>
 This is all English. This is all English. This is all English.
 </div>
 <div class=c4>
 全是中文的情况。全是中文的情况。全是中文的情况。
 </div>
 <div class=c4>
 中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
 </div>
 
 
 <br>
 .c5{ width:300px;word-break:break-all;  border:1px solid black}
 <div class="c5">
 safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
 </div>
 <div class=c5>
 This is all English. This is all English. This is all English.
 </div>
 <div class=c5>
 全是中文的情况。全是中文的情况。全是中文的情况。
 </div>
 <div class=c5>
 中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
 </div>
 
 
 <br>
 .c6{ width:300px;word-break:keep-all;  border:1px solid red}
 <div class="c6">
 safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
 </div>
 <div class=c6>
 This is all English. This is all English. This is all English.
 </div>
 <div class=c6>
 全是中文的情况。全是中文的情况。全是中文的情况。
 </div>
 <div class=c6>
 中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
 </div>
 
 
 <br>
 .c7{ width:300px;word-wrap:break-word;overflow:auto;  border:1px solid yellow}
 <div class="c7">
 safjaskflasjfklsajfklasjflksajflksjflkasjfksafj
 </div>
 <div class=c7>
 This is all English. This is all English. This is all English.
 </div>
 <div class=c7>
 全是中文的情况。全是中文的情况。全是中文的情况。
 </div>
 <div class=c7>
 中英文混排的情况。Chinese and English. 中英文混排的情况。Chinese and English.
 </div>
 
 
  
 
 
 自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法
 
 
 
 对于div,p等块级元素
 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行
 html
 <div id="wrap">正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义</div>
 css
 #wrap{white-space:normal; width:200px; }
 
 
 1.（IE浏览器）连续的英文字符和阿拉伯数字,使用word-wrap : break-word ;或者word-break:break-all;实现强制断行
 
 
 #wrap{word-break:break-all; width:200px;}
 或者
 #wrap{word-wrap:break-word; width:200px;}
 <div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
 
 
 效果：可以实现换行
 
 
 2.（Firefox浏览器）连续的英文字符和阿拉伯数字的断行,Firefox的所有版本的没有解决这个问题,我们只有让超出边界的字符隐藏或者,给容器添加滚动条
 
 
 
 #wrap{word-break:break-all; width:200px; overflow:auto;}
 <div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
 
 
 效果：容器正常，内容隐藏
 
 
 对于table
 
 
 1. (IE浏览器)使用 table-layout:fixed;强制table的宽度,多余内容隐藏
 
 
 <table style="table-layout:fixed" width="200">
 <tr>
 <td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss
 </td>
 </tr>
 </table>
 
 
 效果：隐藏多余内容
 
 
 2.(IE浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行
 
 
 <table width="200" style="table-layout:fixed;">
 <tr>
 <td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890
 </td>
 <td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890
 </td>
 </tr>
 </table>
 
 
 效果：可以换行
 
 
 3. (IE浏览器)在td,th中嵌套div,p等采用上面提到的div,p的换行方法
 
 
 4.(Firefox浏览器)使用 table-layout:fixed;强制table的宽度,内层td,th采用word-break : break-all;或者word-wrap : break-word ;换行，使用overflow:hidden;隐藏超出内容，这里overflow:auto;无法起作用
 
 
 
 <table style="table-layout:fixed" width="200">
 <tr>
 <td width="25%"  style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
 <td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
 </tr>
 </table>
 效果：隐藏多于内容
 
 
 5.(Firefox浏览器) 在td,th中嵌套div,p等采用上面提到的对付Firefox的方法
 运行代码框
 最后，这种现象出现的几率很小，但是不能排除网友的恶搞。
 
 
 下面是提到的例子的效果
 
 
 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 <title>字符换行</title>
 <style type="text/css">
 table,td,th,div { border:1px green solid;}
 code { font-family:"Courier New", Courier, monospace;}
 </style>
 </head>
 <body>
 <h1><code>div</code></h1>
 <h1><code>All white-space:normal;</code></h1>
 <div style="white-space:normal; width:200px;">Wordwrap still occurs in a td element that has its WIDTH attribute set to a value smaller than the unwrapped content of the cell, even if the noWrap property is set to true. Therefore, the WIDTH attribute takes precedence over the noWrap property in this scenario</div>
 
 
 <h1><code>IE word-wrap : break-word ;</code></h1>
 <div style="word-wrap : break-word ; width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
 <h1><code>IE word-break:break-all;</code></h1>
 <div style="word-break:break-all;width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
 
 
 <h1><code>Firefox/ word-break:break-all; overflow:auto;</code></h1>
 <div style="word-break:break-all; width:200px; overflow:auto;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
 <h1><code>table</code></h1>
 <h1><code>table-layout:fixed;</code></h1>
 <table style="table-layout:fixed" width="200">
 <tr>
 <td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
 </tr>
 </table>
 <h1><code>table-layout:fixed; word-break : break-all; word-wrap : break-word ;</code></h1>
 <table width="200" style="table-layout:fixed;">
 <tr>
 <td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
 <td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
 </tr>
 </table>
 <h1><code>FF table-layout:fixed; overflow:hidden;</code></h1>
 <table style="table-layout:fixed" width="200">
 <tr>
 <td width="25%"  style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
 <td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
 </tr>
 </table>
 </body>
 </html>