长文本
对于文本换行，针对的其实都是长文本，这里需要注意，长文本是指超过文本区域范围的文本
<div>
I am a sunny boy
</div>
<div>
我是答案，测试测试测
</div>
上面这些并不是长文本，因为文字宽度或者单词宽度并未超过文本区域
这里的sunnysunnysunny就是长文本
长文本类型可以大致分为3类
- 中文长文本（只有多个中文连在一起才算）
我是答案测试测试测试测测试测试测试测试一下
- 英文长文本
longlonglonglonglonglong
- 中文标点符长文本（只做演示，一般不会出现）
我是答案案案....................................
默认表现
<div>
我是答案测试测试测试测测试测试测试测试一下
</div>
<div>
longlonglonglonglonglong
</div>
<div>
我是答案案案....................................
</div>
除了中文长文本以外，另外两种长文本都溢出了内容区域，显然这不是我们所期待的...
那要如何实现另外两种文本的换行喃？那就要用到 word-break属性
word-break
word-break属性是控制超出区域文本如何换行的
normal
演示效果就如同上面默认一样
只能在正常的单词间或段落间（例如两个单词之间的空格）处换行
- 中文长文本：每个中文之间进行换行
break-all
<style>
div {
word-break: break-all;
}
</style>
<main>
<div>
我是答案测试测试测试测测试测试测试测试一下
</div>
<div>
longlonglonglonglonglong
</div>
<div>
我是答案案案案.....
</div>
</main>
好消息是英文长文本被解决了，但是中文符号长文本还是没有被解决
- 中文长文本：每个中文之间进行换行
- 英文长文本：单词间进行换行，并且长英文单词切割换行
keep-all
<style>
div {
word-break: keep-all;
}
</style>
<main>
<div>
我是答案测试测试测试测测试测试测试测试一下
</div>
<div>
longlonglonglonglonglong
</div>
<div>
我是答案案案案.....
</div>
</main>
更糟糕的事情发生了，三种长文本都无法换行了
break-word
<style>
div {
word-break: break-word;
}
</style>
<main>
<div>
我是答案测试测试测试测测试测试测试测试一下
</div>
<div>
longlonglonglonglonglong
</div>
<div>
我是答案案案案.....
</div>
</main>
完美解决了所有使用长文本问题吧
- 中文长文本：每个中文之间进行换行
- 英文长文本：单词间进行换行，并且长英文单词切割换行
- 中文标点符长文本：字符间进行换行，长标点符号切割换行
许多文章都在说break-word要废弃了，但是我发现浏览器还是能够正常使用，并且MDN上面也没有注明不要用，所以还是可以用break-word作为属性值
网上大多数文章都说overflow-wrap:break-word;是word-break:break-word;替代品，也就简单介绍一下吧
overflow-wrap
overflow-wrap和break-word的作用是一样的，都是控制文本换行的
normal
作用和word-break: normal;相同
break-all
作用和word-break:break-all;相同
anywhere
主要用于max-content和min-content，不懂可以参考CSS疑难点
能够根据这两个属性所表示的区域进行换行
<style>
div {
overflow-wrap: anywhere;
width: max-content;
}
</style>
<main>
<div>
我是答案测试测试测试测测试测试测试测试一下
</div>
<div>
longlonglonglonglonglong
</div>
<div>
我是答案案案案.....
</div>
</main>
推荐使用
个人觉得可以在文本换行时，可以任何区域使用overflow-wrap:break-word;，可以评论区讨论
