已设宽度，但连续纯字母内容溢出不换行

---

前言

这是本周练习遇到的问题，我给该元素设置了宽度，长串中文可以自动换行，但是英文字母不会换行

---

CSS中设置了宽度，但是其中的纯字母内容溢出而不换行

当我们为div标签或者p标签等设置了宽度，会出现文本溢出并且不会换行的情况，一般这种情况都是只有文本内容为单词或者纯数字的时候出现的。

原因是由于：浏览器在解析我们页面的时候，给这一串数字当成一个词了，这样就不会自动切断字符串而进行换行。

解决方法

方法一：

word-break: break-all;

该样式的意思是：内容到达指定宽度强行断句换行，一个单词显示不开将会截断换行继续展示；

方法二：

word-break: break-word;

方法一与方法二的区别在于：

方法一：内容到达指定宽度强行断句换行，一个单词显示不开将会截断换行继续展示
方法二：当前单词在宽度内无法展示，整个单词换行展示

方法三：（推荐）

overflow-wrap: break-word;

overflow-wrap: break-word;与word-break: break-all;的区别：

overflow-wrap: break-word; 和word-break: break-all;是用于处理长单词或字符串换行的 CSS 属性，但它们在处理连续字符时有一些区别。

overflow-wrap: break-word;：

• 旧版本中的名称为 word-wrap: break-word;，但现在已更名为 overflow-wrap。
• 这个属性仅在遇到长单词或字符串时才会强制进行换行。
• 它会尝试在单词内部的合适位置进行断行，以避免单词溢出容器边界。如果没有合适的位置，则会将整个单词放在下一行。
• 适用于非连续字符的文本，如中文、日文、韩文等，以及连续字母和数字的文本。 当遇到非连续字符时，会根据字符之间的空格或断点进行换行。

word-break: break-all;：

• 这个属性是在连续字符（如字母、数字、符号）的文本中强制进行换行的。
• 它会在字符之间的任何位置进行换行，无论是否是单词的一部分。这可能导致单词在任意位置被截断，破坏单词的完整性。
• 适用于连续字母、数字和符号的文本，但对于非连续字符的文本效果可能不理想。
• 当遇到连续字符时，会在字符之间的任意位置进行换行，而不考虑单词的完整性。

综上所述，overflow-wrap: break-word; 会尝试在合适的位置断行，保持单词的完整性，而 word-break: break-all; 则会在连续字符之间的任意位置断行，可能导致单词被截断。你可以根据需要选择适合的属性来处理你的文本换行需求。

关于 word-break: break-word

CSS 属性 word-break: break-word; 用于在长单词或字符串超出容器宽度时强制进行换行，以确保单词不会溢出容器边界。但是，根据 CSS 规范，word-break: break-word; 只适用于非连续字符的文本，如中文、日文、韩文等，而不适用于连续的字母、数字或符号。

对于连续的字母，浏览器会自动采用默认的换行行为，即将文本截断并将其放入下一行。这是因为字母没有明确的断点或分隔符，所以浏览器会根据容器的宽度决定如何换行。

如果你想在连续的字母上强制换行，可以考虑使用 overflow-wrap: break-word; 属性。这个属性在旧版本的 CSS 规范中被称为 word-wrap: break-word; 。它与 word-break: break-word; 类似，但在处理连续字符时会起作用。例如：

.my-container {
  overflow-wrap: break-word;
}

这样，连续的字母文本就会根据容器的宽度进行自动截断并换行显示。