我们相信：世界是美好的，你是我也是。 来玩一下解压小游戏吧！

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

苏南大叔：页面文字折行，word-wrap和word-break的主要区别是什么？ - word-wrap-word-break
页面文字折行，word-wrap和word-break的主要区别是什么？（图6-1）

苏南大叔的“程序如此灵动”博客，记录苏南大叔的代码感悟经验。本文测试环境：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>
HTML

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

苏南大叔：页面文字折行，word-wrap和word-break的主要区别是什么？ - 默认情况
页面文字折行，word-wrap和word-break的主要区别是什么？（图6-2）

word-wrap属性

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

word-wrap取值作用
normal默认，单词间空格换行
break-word单词内换行，长单词及长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>
HTML

苏南大叔：页面文字折行，word-wrap和word-break的主要区别是什么？ - break-word
页面文字折行，word-wrap和word-break的主要区别是什么？（图6-3）

word-break属性

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

word-break取值作用
normal默认
keep-all单词不折行，效果同默认
break-word单词折行，不另起一行
默认：<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>
HTML

苏南大叔：页面文字折行，word-wrap和word-break的主要区别是什么？ - keep-all-break-all
页面文字折行，word-wrap和word-break的主要区别是什么？（图6-4）

再次对比

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>
HTML

苏南大叔：页面文字折行，word-wrap和word-break的主要区别是什么？ - break-word对比
页面文字折行，word-wrap和word-break的主要区别是什么？（图6-5）

两者同时使用的话，效果就是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>
HTML

苏南大叔：页面文字折行，word-wrap和word-break的主要区别是什么？ - break-all2
页面文字折行，word-wrap和word-break的主要区别是什么？（图6-6）

异同点总结

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

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

结束语

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

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

 【福利】 腾讯云最新爆款活动！1核2G云服务器首年50元！

 【源码】本文代码片段及相关软件，请点此获取更多信息

 【绝密】秘籍文章入口，仅传授于有缘之人   css