CSS的word-wrap、word-break、word-spacing、white-space、letter-spacing

使得文本换行有很多方式，

1.< br/>标签元素，能够强制使得所在位置文本换行
2.< p>元素，< div>设定宽度，都可以对文本内容实现自适应换行
3.对于长单词或者链接，默认不会断开换行，方式2就不能够在其这些文本内部进行换行了，这时就需要word-wrap : break-word ;或者word-break:break-all;实现强制断行。

两种方法的区别说明：

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

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

我遇到一个情况，就是我设置了：

word-break:break-all 或者word-wrap:break-word都无效，字符串不会自动换行。

经过查证，发现原因会有两个：

1、word-wrap对行内元素是没有效果的

2、一般情况下，元素拥有默认的white-space:normal（自动换行，不换行是white-space:nowrap），可能是元素中设置的white-space是norwrap导致，无法换行。所以需要

white-space:normal;
word-break:break-all;

这样问题就解决了。
white-space对程序中的空白进行处理，默认是normal （浏览器会对空白进行忽略）

3、对table 的td 标签下的元素设置word-wrap：word-break是没有效果的

white-space

我们都知道如果在html中输入多个空白符，默认会被当成一个空白符处理，实际上就是white-space这个属性控制的：

1.normal：合并空白符和换行符；

2.nowrap：合并空白符，但不许换行；

3.pre：不合并空白符，并且只在有换行符的地方换行；

4.pre-wrap：不合并空白符，允许换行符换行和文本自动换行；

word-spacing

功能：主要控制单个词与单个词之间的距离
word-spacing指的是字符“空格”的间隙。如果一段文字中没有空格，则该属性无效。
word-spacing 属性增加或减少单词间的空白（即字间隔）。
该属性定义元素中字之间插入多少空白符。针对这个属性，“字” 定义为由空白符包围的一个字符串。如果指定为长度值，会调整字之间的通常间隔；所以，normal 就等同于设置为 0。允许指定负长度值，这会让字之间挤得更紧。

<p style="word-spacing:10px;"> this is a  test</p>
//显示： this   is    a     test*/
<p style="word-spacing:10px;">这  是   一   个  测  试 </p>
//显示: 这     是      一      个     测    试

letter-spacing

lletter-spacing 属性增加或减少字符间的空白（字符间距）。

该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔。因此，normal 就相当于值为 0。

<p style="letter-spacing:10px;"> thisisatest </p>
//显示： t  h  i  s  a  t  e s t
<p style="letter-spacing:10px;"> 这是一个测试</p>
//显示：这   是   一   个   测   试

letter-spacing,word-spacing的区别

word-spacing 属性增加或减少单词间的空白（即字间隔）。
letter-spacing 属性增加或减少字符间的空白（字符间距）。
word-spacing意思是设置单词间的间距，如何区别是不是为一个单词呢，这里我们可以看出 用空格隔开的为一个单词，所以在执行word-spacing:10px;执行的前后可以发现，执行后空格变得更大了！！