页面文字折行，word-wrap和word-break的主要区别是什么？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

页面排版类英文的字母排版问题，听起来很简单。但是如果真正弄明白，事情还并不简单。苏南大叔根据自己的理解对这个问题进行一下总结。本文是页面英文排版折行问题的系列文章的第一篇，主要描述css里面的word-wrap和word-break的区别。

苏南大叔的“程序如此灵动”博客，记录苏南大叔的代码感悟经验。本文测试环境：win10，chrome@123.0.6312.105。

效果默认

默认：<br/>
<div class="default">
    Uncle Sunan is a veryveryveryveryveryveryvery powerful person.
    https://newsn.net/about.html
</div>
keep-all:<br/>
<div class="keep-all">
    Uncle Sunan is a veryveryveryveryveryveryvery powerful person.
    https://newsn.net/about.html
</div>
<style>
div{
    width: 200px;
    border: 1px dotted red;
    padding: 3px;
    margin-bottom: 8px;
}
.default{
    word-wrap: normal;
    word-break: normal;
}
.keep-all{
    word-break: keep-all;
}
</style>

默认效果就是word-wrap:normal和word-break:keep-all。

word-wrap属性

word-wrap属性允许长单词或URL地址换行到下一行。它的取值只有两个：

默认：<br/>
<div class="default">
    Uncle Sunan is a veryveryveryveryveryveryvery powerful person.
    https://newsn.net/about.html
</div>
break-word:<br/>
<div class="break-word">
    Uncle Sunan is a veryveryveryveryveryveryvery powerful person.
    https://newsn.net/about.html
</div>
<style>
div{
    width: 200px;
    border: 1px dotted red;
    padding: 3px;
    margin-bottom: 8px;
}
.default{
    word-wrap: normal;
}
.break-word{
    word-wrap: break-word;
}
</style>

word-break属性

word-break属性取值，除了默认的normal外，还有两个取值：keep-all和break-all。主要控制是否对单词进行折行。

默认：<br/>
<div class="default">
    Uncle Sunan is a veryveryveryveryveryveryvery powerful person.
    https://newsn.net/about.html
</div>
keep-all:<br/>
<div class="keep-all">
    Uncle Sunan is a veryveryveryveryveryveryvery powerful person.
    https://newsn.net/about.html
</div>
break-all:<br/>
<div class="break-all">
    Uncle Sunan is a veryveryveryveryveryveryvery powerful person.
    https://newsn.net/about.html
</div>
<style>
div{
    width: 200px;
    border: 1px dotted red;
    padding: 3px;
    margin-bottom: 8px;
}
.default{
    word-break: normal;
}
.keep-all{
    word-break: keep-all;
}
.break-all{
    word-break: break-all;
}
</style>

再次对比

break-word:<br/>
<div class="break-word">
    Uncle Sunan is a veryveryveryveryveryveryvery powerful person.
    https://newsn.net/about.html
</div>
break-all:<br/>
<div class="break-all">
    Uncle Sunan is a veryveryveryveryveryveryvery powerful person.
    https://newsn.net/about.html
</div>
<style>
    div{
        width: 200px;
        border: 1px dotted red;
        padding: 3px;
        margin-bottom: 8px;
    }
    .break-word{
        word-wrap: break-word;
    }
    .break-all{
        word-break: break-all;
    }
</style>

两者同时使用的话，效果就是word-break:break-all的效果，貌似word-wrap:word-break的效果就消失了。

break-all:<br/>
<div class="break-all">
    Uncle Sunan is a veryveryveryveryveryveryvery powerful person.
    https://newsn.net/about.html
</div>
break-all-2:<br/>
<div class="break-all-2">
    Uncle Sunan is a veryveryveryveryveryveryvery powerful person.
    https://newsn.net/about.html
</div>
<style>
    div{
        width: 200px;
        border: 1px dotted red;
        padding: 3px;
        margin-bottom: 8px;
    }
    .break-all{
        word-break: break-all;
    }
    .break-all-2{
        word-break: break-all;
        word-wrap: break-word;
    }
</style>

异同点总结

通过上面的例子可以看到，重点就是：word-break:break-all与word-wrap:break-word。

• 两者共同点是都能把长单词强行断句。
• 不同点是word-wrap:break-word会首先起一个新行来放置长单词，新的行还是放不下这个长单词则会对长单词进行强制断句；而word-break:break-all则不会把长单词放在一个新行里，当这一行放不下的时候就直接强制断句了。

结束语

目前的结论就是：面对英文字母排版的情况，使用word-break:break-all即可。更多css相关精彩文章，请点击：

• https://newsn.net/tag/css/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。