word-wrap, word-break, white-space的区别（即换行问题）

上一个实例，浏览器对常规的文本，在容器显示不全的情况下，会自动换行显示下一个单词，但是对超长的单词，会溢出

<div class="test1">aaa bbb ccc dddddddd</div>

word-wrap

是否运行文本单词内换行

在上面的示例上，加上word-wrap

    .test1{
        width: 50px;
        background-color:aquamarine;
       	word-wrap: break-word;
    }

可以看到超长的单词内部被截断换行了，这就是word-wrap的作用

word-break

控制文本怎么换行

从之前的实例结果来看，aaa, bbb, ccc单词的后面，都有多余的位置

    .test1{
        width: 50px;
        background-color:aquamarine;
        word-wrap: break-word;
        word-break: break-all;
    }

word-break让这些空白被填满，但会导致更多的单词被截断换行，当然它还有其他的参数,会有不同的效果，但都是控制换行方式的

white-space

处理文本的空白和换行

    .test1{
        width: 50px;
        background-color:aquamarine;
        white-space: pre-wrap;
    }

正常情况aaa前面的空格会被处理掉，使用white-space来控制后，会让空格保留，这对文章的展示很有帮助

另外它也可以禁止掉浏览器默认的换行策略, 它会让word-wrap: break-word;失效

    .test1{
        width: 50px;
        background-color:aquamarine;
        white-space: nowrap;
    }