css white-space和word-wrap的区别

Question

white-space：nowrap是不换行，word-wrap:break-word是换行，我发现这两个一起用的时候，white-space起了作用，不论怎么设置优先级。谁能给详细解释下white-space的作用，以及使用场景呢？谢谢！

HTML如下：
        <table>
            <thead>
                <tr>
                    <th>title</th>
                    <th>title</th>
                    <th>title</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>the</td>
                    <td>testinglongstring</td>
                    <td>Row</td>
                </tr>
                <tr>
                    <td>Second</td>
                    <td>-</td>
                    <td>Row</td>
                </tr>
                <tr>
                    <td>the</td>
                    <td>third</td>
                    <td>Row</td>
                </tr>
            </tbody>
        </table>

CSS如下：

table {
    border:1px solid black;
    border-collapse: collapse;
    width: 300px;
    border: 1px solid #000;
    table-layout: fixed;
    white-space: nowrap;
    word-wrap: break-word;
    word-break: break-all;
}
th,td{
    border:1px solid black;
}

结果显示：

Answer 1

两者的作用域不一样。
white-space是作用于空格和回车这种空白格上的，一般拿来控制空格是不是合并、回车是否折行、句子是不是在空格处折行之类的，而word-wrap是作用在单词上的，一般用于控制超长单词是否折行。

再具体的，你可以去搜索看一下。

（其实看名字就差不多能明白了）。。

Answer 2

white-space:nowrap 表示文本不会换行，文本会在在同一行上继续，直到遇到
标签为止。
word-wrap:break-word 在长单词或 URL 地址内部进行换行。