记🍑长单词无法成功换行🍑导致的样式事故

事故回顾

上周做了个需求，需求里面有个点是表格数据行的操作栏里有个详情按钮，点击详情按钮，会展示一个抽屉，抽屉里面的内容为表格行对应的详情数据。本来是一个没有啥难度的需求，就是正常展示表单字段而已，但是后面再在测试的时候，发现一个问题，其中有一个字段最大长度为3000字，中英文最大长度都可以正常展示，但是如果输入3000个1，会导致数据不换行，导致抽屉内部区域宽度异常，查看代码发现，数据是有设置换行样式:

css 复制代码

word-warp: break-word;

但是为啥不生效呢？

当时就想直接换成另外一种换行样式：

css 复制代码

word-break：break-all;

页面数据可以正常换行了，但是有一个问题是这个样式设置会导致长单词内部直接截断，展示语义就不是这么的好，当然如果你认为可以接受的话，可以这样设置，毕竟这样设置也有他的优势，毕竟布局看着就舒服的多，不会结尾出现空白。

那既然不用word-break：break-all,肯定还是要使用第一种样式设置，那就要看看它为啥设置不生效呢？

是不是没有设置宽度，发现设置完宽度以后，确实样式展示正常，但是设置宽度在本需求中是不可取的，所以就只能放弃。

后面才发现是抽屉设置display:flex布局导致的不换行，去掉就可以了。

既然遇到了长单词换行的问题，就系统地整理一下有关长单词换行的知识点，主要是以上两种样式，在后面会讲下flex布局可能会导致的问题。

word-warp

word-wrap属性用于指定长单词或文本行如何在容器中进行换行 。这个属性主要用于处理长单词或连续文本而不溢出容器。word-wrap 的替代属性是 overflow-wrap，这是更为现代和标准的属性。

如果我们设置行内样式为：

css 复制代码

word-warp:break-word;

我们打开控制台会发现显示的样式为：

css 复制代码

overflow-wrap:break-word;

实际上，overflow-wrap 是 CSS 规范中的标准属性，而 word-wrap 是其非标准的别名，现代浏览器都支持 overflow-wrap。

我们打开devdocs,搜索word-warp是搜不到的，只能搜到overflow-wrap。：devdocs.io/css/overflo...

网站显示overflow-wrap有以下属性：

css 复制代码

/* Keyword values */
overflow-wrap: normal;
overflow-wrap: break-word;
overflow-wrap: anywhere;

/* Global values */
overflow-wrap: inherit;
overflow-wrap: initial;
overflow-wrap: revert;
overflow-wrap: revert-layer;
overflow-wrap: unset;

这里我们只介绍：

overflow-wrap: normal：这是默认值，长单词或文本行将不会换行。
overflow-wrap: break-word：长单词或文本行将在必要时换行，以防止内容溢出容器的边界。
overflow-wrap: anywhere：允许在任何必要的地方断行，甚至在单词中间没有自然断点（例如没有空格或连字符）的情况下。

注意点

虽然word-wrap 的替代属性是 overflow-wrap ，但是word-wrap只有两个属性：normal/break-word,如果给word-wrap添加属于overflow-wrap，但不属于word-wrap的属性，会无效，并且报错，所以建议使用 overflow-wrap。

word-break

word-break 用于控制浏览器在何处断行文本。这个属性在处理非常长的单词或者没有适当断点的文本时特别有用，可以影响文本在容器内的换行`

我们打开devdocs,搜索word-break：devdocs.io/css/word-br...

网站显示word-break有以下属性：

css 复制代码

/* Keyword values */
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: break-word; /* deprecated */

/* Global values */
word-break: inherit;
word-break: initial;
word-break: revert;
word-break: revert-layer;
word-break: unset;

这里我们只介绍：

word-break: normal：这是默认值，浏览器在标点符号或字符边界处断行，保持单词的完整性。
word-break: break-all：允许在单词内部的任意位置断行，即使没有适当的断点。这种模式特别适用于处理长的无空格字符串或文本。
word-break: keep-all尽量在标点符号或字符边界处断行，保持东亚语言的文本单词组合的完整性，而不在非标点符号或字符边界处断行。`
break-word：与 anywhere 该值相同，如果行中没有其他可接受的断点，则允许在任意点中断通常牢不可破的单词，但在计算最小内容内部大小时，不考虑单词中断引入的软换行机会。

适用场景:

normal: 适合大多数语言，特别是英语等使用空格作为单词断点的语言。
break-all: 适合处理长的无空格字符串或需要在单词内部断行的文本。
keep-all: 适用于东亚语言（如中文、日语、韩语等），保持文本的完整性和连续性。
break-word：当需要允许在单词内部换行，确保长单词在需要时可以在单词内部进行换行。这在处理长单词或单词内有连字符的情况下非常有用。

word-break和 word-wrap的区别

word-break 和 word-wrap 是两个用于处理文本溢出的 CSS 属性，它们的作用略有不同：

word-break: 控制文本在何处断开换行，主要针对非 CJK（中文、日文、韩文）文本有效。
- normal: 在允许的断点（如空格或连字符）处断开，默认行为。
- break-all: 在任意字符处断开，以防止溢出，适用于各种文本。
- keep-all: 中文等 CJK 文本中的单词不会断开，英文单词只在空格或连字符处断开。
overflow-wrap （以前称为 word-wrap）：控制浏览器是否在单词内部换行。
- normal: 默认行为，只在允许的断点（如空格或连字符）处换行。
- break-word: 在必要时，在单词内部换行以防止溢出，适用于非 CJK 文本。

主要区别：

word-break 更关注于文本在何处断开以进行换行，不仅限于非 CJK 文本。适用于需要精确控制文本换行方式的情况，特别是当文本包含长单词或无法分割的文本时。
overflow-wrap （或 word-wrap）通常用于需要确保文本不会溢出其容器的情况，即使是在单词内部也要进行换行。

在处理非常长的单词或文本溢出时，通常会结合使用这两个属性，以获得最佳的文本布局和可读性。

flex布局下的长文本换行

讲述这点，主要还是因为自己剖的坑，只能自己填。这里就简单介绍下。当使用flex布局时，要设置换行，否则可能会导致展示异常。

css 复制代码

.wordFlex { 
    display: flex; 
    flex-wrap: wrap; /* 确保 flex 项目能够换行 */
} 

.wordFlex p { 
    word-wrap: break-word; /* 确保 flex 项目中的长单词能够换行 */ 
    overflow-wrap: break-word; /* 提高浏览器兼容性 */ 
    max-width: 100%; /* 确保项目不超过容器宽度 */ 
}

兼容性

overflow-wrap

兼容性情况：

全局兼容性 ：在现代浏览器中，overflow-wrap 的支持非常广泛，包括 Chrome, Firefox, Safari, Edge 等主流浏览器。
IE 浏览器 ：在早期的 IE 浏览器中，支持 word-wrap 而非标准的 break-word 值，而现在最新版本的 IE 也支持 overflow-wrap。

word-break

兼容性情况：

全局兼容性 ：word-break 的基本功能在现代浏览器中得到了广泛支持，包括 Chrome, Firefox, Safari, Edge 等。
CJK 文本 ：对于中文、日文、韩文等 CJK 文本，word-break: break-all 和 word-break: keep-all 的行为在不同浏览器上可能略有差异。

`总结`

综上所述，建议:

使用overflow-wrap,代替word-wrap,overflow-wrap功能更强，兼容性更好。
word-break: break-all适合处理长的无空格字符串或需要强制换行的情况，尤其是在没有自然断点的情况下。
overflow-wrap: break-word 更侧重于处理单词或连续字符过长而无法适应容器宽度的情况，保持单词完整性的同时进行适当的换行。