word-wrap: break-word和word-break: break-all区别

2019-09-04 16:12:27 浏览数 (1)

相信大家对断句换行都有一点了解，也许也有部分人连这个属性是什么都不知道。当然了，如果是IT这个专业相关的大佬们可以不用看了，这篇文章主要针对于自学前端和转行的朋友们。

案例

代码语言：javascript复制

p{
    width: 200px;
    height: 200px;
    background: #ccc;
}

尴尬的效果图

不知道有没有人遇到过这种情况，如果遇到了，是否看起来很蛋疼？答案是肯定的，那么我们肯定希望他换行呀~，所以我们的word-wrap: break-word的存在就有意义了！效果如下：

代码语言：javascript复制

p{
    width: 200px;
    height: 200px;
    background: #ccc;
    word-wrap: break-word;
}

word-wrap: break-word效果图

可以看到，终于让那个单词换行了，但是我们还发现这个问题，好多行后面都有一大片空白被浪费了，看起来觉得很不爽，如下图所示:

尴尬的效果图

那我们怎么搞到这种强迫症患者绝对不能容忍的问题呢？接下来我们的word-break: break-all的存在就有意义了，效果如下：

代码语言：javascript复制

p{
    width: 200px;
    height: 200px;
    background: #ccc;
    word-break: break-all;
}

完美效果图

好了，这样子看起来舒服多了，但是对于一个单词就是要一行看完，就不喜欢一个单词换两行的朋友，就可以不用word-break: break-all了，毕竟这个属性，我也基本不用，一般用word-wrap: break-word就差不多了

0 人点赞