css单行word-warp

在 CSS 中有一个很常用的属性 word-wrap，意思是自动换行，但是如果单行显示的话，就用不到这个属性了，这时候我们需要用到单行 word-wrap 属性。

单行 word-wrap: 
    /* `break-word`: 实现长单词截断换行 */ 
    word-wrap: break-word;

比如说，我们有一个很长的单词或者一个超级长的链接需要在单行显示，但是我们又不想让它们超出边框或者影响页面的美观。这时我们可以给这个单行加上 word-wrap 和 break-word。这里的意思就是如果一个单词太长，就强制截断并换行。

如果不加这个属性，那么单词或链接就会一直延伸到边框外面导致溢出，从而影响整个页面的美观。

/* 不加 word-wrap 属性 */
.overflow {
    border: 1px solid #ddd;
    width: 200px;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    text-align: center;
}


    superlongurl.com/long/link/which/will/overflow


/* 加上单行 word-wrap 属性 */
.single-line {
    word-wrap: break-word;
    border: 1px solid #ddd;
    width: 200px;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    text-align: center;
}


    superlongurl.com/long/link/which/will/overflow

可以看到，加上单行 word-wrap 属性后，整个单词被截断并换行了，这样不仅让页面更好看了，而且也不影响单词或链接的阅读和点击。