默认行为

当我们给一个div设置一个宽度，如果内容是中文，超出是会自动换行的，但是如果混杂着英文，而且英文过长，就有可能溢出这个div。

举个例子：

  <style>
    div {
      border: 1px solid red;
      width: 200px;
    }
  </style>
  <div>
    hello i am answer cp3 test the line whether if wrap。。。。。。。。。。。。。
    abcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdef
    我是答案cp3，测试一下是否有换行
  </div>

可以看到句号和长英文都溢出了，中文和短英文单词可以正常换行，这个就是默认行为。

如果我们要实现长英文也换行，那么就要用到word-break和overflow-wrap这两个属性了。我们先来讲讲word-break。

word-break

这个属性定义文本该如何换行。有以下值：

normal

默认值，就是上面的表现形式

break-all

任意字符都换行，这个会把长英文单词切割换行，但是对符号无效果，以上面的为例子

keep-all

这个属性对英文单词的表现和normal一致，主要是针对中文，韩文等，会以中文后的符号为节点换行，如果没有符号，则不会换行

中文后有符号：

中文后无符号：

break-word

这个属性可以保证符号和长英文都能换行，不会溢出容器。也就是尽可能语义化换行，所以段尾就有可能有一大段的空白。

这个属性准备要废弃了⚠️，慎用。

下面再来讲讲overflow-wrap。

overflow-wrap

这个属性以前叫word-wrap,word-wrap原本是IE的私有属性，然后CSS3把它引入，然后改名成overflow-wrap。

现在用overflow-wrap就可以了。

它有以下属性值：

anywhere

这个表现和上面word-break:break-word表现形式一样。

break-word

这个属性正常表现也是和anywhere一致。

不一样的地方是，特殊情况下，anywhere会以元素的最小宽度换行，而break-word不会，它是尽量保证能正常换行。

这种特殊情况要配合width:min-content和max-width就能看出区别。

提示：min-content是指能装下子元素单个内容的最小宽度。

<style>
div {
  max-width: 200px;
  width: min-content;
  border: 1px solid red;
  overflow-wrap: break-word;
}
</style>
<div>
    hello i am answer cp3 test the line whether if wrap。。。。。。。。。。。。。。。
    abcdefabcdefabcdefabcdefabcdefabcdefabcdefabcdef
    我是答案cp3测试一下是否有换行
</div>