长类名本身不会换行，因为class属性不是渲染内容；真正需换行的是被显示出来的类名文本，须置于有宽度限制的块级容器中并设置overflow-wrap: break-word。
直接说结论：长类名（如 user-profile-settings-modal-overlay-trigger-button）本身不是换行问题，而是你把它当文本内容渲染了——CSS 的 overflow-wrap 和 word-break 对 class 属性值完全无效；真要“处理长类名换行”，99% 的场景其实是想让 *显示出来的文本内容* 正常折行，而不是操作 HTML 属性本身。
为什么 class 名加 overflow-wrap: break-word 完全没用
class 是 HTML 属性，浏览器不会把它当作可渲染文本去排版。你在 DevTools 里给一个 <div class="very-long-class-name"> 元素加 overflow-wrap: break-word，它只对元素内部的文本内容起作用，跟 class 字符串本身毫无关系。
- 常见翻车现场：在调试面板里复制 class 名粘贴到页面中做示例文本，却忘了用
<span>或<pre>包裹，导致样式没生效 - 更隐蔽的问题：用了
content: attr(class)伪元素生成文本，但没设display: block+width，结果伪元素 inline 级别下overflow-wrap被忽略 - 属性选择器（如
[class*="modal"]）只能用于匹配和选中元素，不能触发任何换行行为——它不产生内容，也不影响布局
真正需要换行的，是 class 名“被显示出来”的那个文本节点
比如文档页展示代码片段、开发者工具面板、UI 组件库的 class 预览区。这时你要控制的是那段 *作为内容的字符串*，不是 class 属性本身。
- 必须确保该文本处于块级或有明确宽度限制的容器中：
width、max-width、flex: 1缺一不可 - 推荐用
overflow-wrap: break-word，不是word-break: break-all—— 类名里的连字符-是天然断点，break-word会优先在这里折行，保持可读性 - 如果容器是
display: flex子项，记得加min-width: 0，否则 flex item 默认最小宽度为内容长度，死活不折行 - 避免
white-space: nowrap意外继承或全局重置覆盖——这是最常被忽略的失效原因
用属性选择器“模糊匹配”简化样式？小心副作用
有人想用 [class*="modal"] { overflow-wrap: break-word; } 统一处理所有含 modal 的元素，这看似省事，实则危险。
立即学习“前端免费学习笔记（深入）”；
- 这个选择器会命中所有带
modal的 class，包括modaldialog、custom-modal-header，甚至not-a-modal—— 语义失控 - 它把样式逻辑耦合到 class 命名细节上，一旦重构 class 名（比如改成
dialog-modal），样式就丢失，且难以定位 - 真正该做的，是给需要展示类名的容器加语义化 class，比如
.code-sample或.class-display，再单独写样式 - 如果非要用属性选择器，至少限定标签：
code[class*="modal"]或pre[class*="modal"]，缩小影响范围
事情说清了就结束：所谓“长类名换行”，本质是文本内容换行问题；属性选择器不能替代语义 class，也不能绕过宽度约束和 display 类型这些硬性前提。别在 class 属性上浪费调试时间，盯住那个真正被渲染出来的字符串节点就行。
