当文本内容超出指定容器宽度时，需通过 CSS 控制其自动断行；默认情况下长单词或连续无空格字符串不会换行，需显式设置 overflow-wrap: break-word 或 word-break 等属性。
当文本内容超出指定容器宽度时，需通过 css 控制其自动断行；默认情况下长单词或连续无空格字符串不会换行，需显式设置 `overflow-wrap: break-word` 或 `word-break` 等属性。
在您的代码中，问题核心在于：overflow-wrap: normal 是默认值，它不会主动触发换行，仅在必要时（如遇到空格或连字符）才折行；而像 Antidisestablishmentarianism 这类超长单词，或一串无空格的英文/数字组合（例如 URL、邮箱、token），会直接溢出容器边界。
要实现“文本严格限制在容器内并自动断行”，推荐以下组合方案：
✅ 首选方案（语义清晰、兼容性好）：
h6 {
/* 其他样式保持不变 */
width: 80vw;
overflow-wrap: break-word; /* 关键：允许长单词内断行 */
word-break: break-word; /* 增强兼容性（尤其对旧版 Safari / IE） */
/* 移除 overflow-wrap: normal 和 box-sizing: content-box（非必需） */
}✅ 补充说明：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
-
overflow-wrap: break-word（原word-wrap: break-word）是标准属性，优先推荐； -
word-break: break-word在部分浏览器中行为更激进，可作为兜底； - 避免使用
overflow: hidden（您代码中的overflow: hide是无效值），它只会裁剪内容，不解决换行问题； -
box-sizing: content-box是默认值，无需显式声明；若需精确控制尺寸，建议统一用border-box。
✅ 完整修复示例：
<style>
.h6Box {
width: 80vw;
margin: 0 auto;
background-color: #f9f9f9;
padding: 1rem;
}
h6 {
color: #89CFF0;
font-size: x-large;
text-align: left;
padding-left: 2vw;
margin: 0;
background-color: white;
border: 5px solid white;
border-radius: 10px;
width: 100%;
/* 关键换行控制 */
overflow-wrap: break-word;
word-break: break-word;
/* 可选：防止超长英文单词粘连显示 */
hyphens: auto; /* 需配合 lang 属性 & 浏览器支持 */
}
</style>
<div class="h6Box">
<h6>Here is some normal text — but watch what happens with supercalifragilisticexpialidocious</h6>
</div>? 注意事项：
- 若容器宽度由
vw或flex动态计算，请确保父级未设置white-space: nowrap； - 中文、日文等无空格语言天然支持按字换行，通常无需额外设置；
- 对于代码片段或 token 类内容，可考虑
font-family: monospace+tab-size: 2提升可读性； - 测试时建议使用真实长单词（如
Pneumonoultramicroscopicsilicovolcanoconiosis）或一串无空格字符验证效果。
掌握 overflow-wrap 与 word-break 的区别与协同使用，是精准控制文本流布局的关键一步。
