文字过长，元素宽度容纳不下文字内容，文字超出元素显示。对于这种情况，一般有两种处理方式。一种是省略内容不显示，很暴力，很直接，还有一种就是换行显示。下面我将介绍几种常用的css换行方法。word-break这个属性相信大家都不陌生。在介绍这个属性之前，我们先介绍一个缩写CJK：中日韩统一表意文字。该术语将在以下介绍中使用。先简单介绍下word-break的几个属性：normal：使用默认的换行规则break-all：对于非CJK文字，可以在任意字符处换行keep-all：CJK文字不停，非-CJK文本的行为与普通文本相同让我们看几个例子：试验试验试验试验试验试验试验试验试验试验试验试验试验试验试验试验试验试验试验试验试验试验试验试验试验试验试验试验试验试验试验试验试验试验试验试验试验试验试验试验试验试验试验试验试验试验试验试验试验试验试验。>div{宽度：100px；word-break:normal;}当word-break正常时，可以看到CJK文字在使用默认规则时会自动换行，非CJK文字不会自动换行，会超出容器，但是在找到内容的时候比如空格可以作为换行的依据，非CJK内容也可以实现换行。如果放不下就立即换行，不管是中日韩内容还是非中日韩内容，也可以理解为break-all把非中日韩内容当成中日韩div{width:100px;word-break:keep-all;}从上面看：keep-all属性正好和break-all相反，将CJK内容当成非CJK内容处理overflow-wrap。可能有人会觉得这个属性有点奇怪，但是我说word-wrap想必大家都不陌生，其实就是word-wrap只是换了个名字而已，属性值完全一样。下面介绍一下它的属性值：normal：表示在一个普通单词的末尾换行break-word：表示如果行中没有多余的空间来容纳这个单词to末尾，那些不能换行的普通单词besplit将被强制拆分为换行符。让我们看一个例子：div{width:100px;overflow-wrap:break-word;}从上面的例子可以看出：当属性值为break-word时，到达容器边界时，如果word还没有结束，也会自动换行。如果发现表示单词结束的空格，就会判断当前行剩余的宽度是否可以容纳下一个单词。如果没有，它将执行换行以避免单词溢出。属性值：normal：连续的空格会被合并，换行符会被当作空格处理。填充行框时，如有必要，将添加换行符。nowrap：像往常一样，连续的空白将被合并。但文本中的换行符无效。pre：将保留连续的空白字符。遇到换行符或
元素时会发生换行。预换行：将保留连续的空白字符。当遇到换行符或
元素时，或者需要填充行框时，就会出现换行符。pre-line：将合并连续的空白字符。当遇到换行符或
元素时，或者需要填充行框时，就会遇到换行符。下面看几个具体的例子：
