固定宽度下文本溢出是因超长单词未被断行，需用overflow-wrap: break-word允许单词内断行，或word-break: break-all强制任意字符间断行以防止溢出。
CSS要设置固定宽度并让文本自动换行，核心其实很简单：给元素一个明确的
width值来固定宽度，然后利用
word-wrap: break-word;（或者更现代的
overflow-wrap: break-word;）来处理那些超长的单词，确保它们也能在边界处断开。至于普通文本的自动换行，对于块级元素来说，
white-space: normal;通常是默认行为，所以多数情况下你甚至不需要显式设置。
解决方案
要让一个块级元素在固定宽度下实现文本自动换行，我们主要关注两个CSS属性。
一个就是width
属性，这没什么好说的，它就是用来定义你想要的固定宽度。比如，你想让一个
div或者
p标签只有200像素宽，那就直接写：
.my-container {
width: 200px;
/* 其他样式 */
}接下来是文本换行的问题。这里面有个小细节，也是很多人容易混淆的地方。普通句子里的词语，如果太长，浏览器默认会尝试在词语之间进行换行。但如果是一个非常长的单词（比如一串没有空格的URL或者一长串字母数字组合），它就不会被浏览器轻易地拆开，这时候就可能导致溢出。
立即学习“前端免费学习笔记（深入）”；
为了解决这种超长单词溢出的情况，我们需要用到word-wrap
或者overflow-wrap
属性。这两个属性的功能几乎一样，
overflow-wrap是
word-wrap的标准化版本，推荐使用
overflow-wrap，但为了兼容性，有时候会两者都写。
它们都有一个
break-word的值，意思是“当一个单词太长，超出容器边界时，允许在单词内部的任意位置断开”。
.my-container {
width: 200px;
word-wrap: break-word; /* 旧版浏览器兼容 */
overflow-wrap: break-word; /* 推荐使用 */
/* 默认情况下，块级元素的 white-space 就是 normal，所以一般不需要额外设置 */
/* white-space: normal; */
}所以，综合起来，一个最常见的固定宽度自动换行设置就是这样：
这是一段文字，它应该会在固定宽度内自动换行。这里有一个超长的单词，比如：supercalifragilisticexpialidocious，看看它会不会被正确地断开。 还有一段普通文本，用来测试正常换行效果。
.fixed-width-wrap {
width: 250px; /* 设置你想要的固定宽度 */
background-color: #f0f0f0;
padding: 10px;
border: 1px solid #ccc;
/* 确保超长单词也能换行 */
word-wrap: break-word;
overflow-wrap: break-word;
/* white-space: normal; 是默认值，通常不需要显式设置，但知道它很重要 */
}通过这样的设置，你的内容无论多长，都能乖乖地待在250px的容器里，遇到超长单词也不会“跑”出去。
固定宽度下，为什么我的长文本还是溢出了边界？
这确实是个让人头疼的问题，我刚开始接触CSS的时候也常常被它搞得一头雾水。明明设置了
width，也用了
word-wrap: break-word;，结果发现某些文本块还是会“破框而出”，尤其是那些由一长串字符组成，中间没有空格或连字符的内容。
出现这种情况，很可能是你对
word-wrap（或者
overflow-wrap）和另一个属性
word-break的理解有所偏差。
word-wrap: break-word;（或
overflow-wrap: break-word;）它的主要职责是“允许在单词内部断开，但只在必要时才发生，也就是当整个单词都放不进当前行的时候”。它优先保持单词的完整性。这意味着，如果一个单词可以完整地放在当前行，它就不会被断开。只有当一个单词本身就比容器还宽，或者它前面的内容已经把当前行占满了，它才会在单词内部找个地方断开。
而word-break
属性则提供了更激进的控制方式。它有几个值，其中最常用也最容易解决溢出问题的就是word-break: break-all;
。
当你设置
word-break: break-all;时，浏览器会强制在任何字符之间进行断行，只要它能让内容适应容器宽度。它不再关心这是一个完整的单词，而是直接按需拆分。这对于那些由非拉丁字符（比如中文、日文、韩文等）组成的文本，或者那些没有自然断点（如空格）的超长字符串（比如URL、代码片段、长串ID）特别有用。
举个例子：
.force-break-all {
width: 150px;
background-color: #e6f7ff;
padding: 8px;
border: 1px solid #a0d9ff;
/* 强制在任何字符处断开，更激进 */
word-break: break-all;
/* 此时 word-wrap: break-word; 就不那么必要了，因为 break-all 已经很强力了 */
/* 但为了兼容性，也可以保留 */
overflow-wrap: break-word;
}使用`word-break: break-all;
