本文讲解如何在基于 display: flex 的响应式表格中，针对“Resource Name”等长文本列启用自动换行，避免内容溢出或横向滚动，核心是结合 word-wrap: break-word 与明确宽度控制。
本文讲解如何在基于 `display: flex` 的响应式表格中，针对“resource name”等长文本列启用自动换行，避免内容溢出或横向滚动，核心是结合 `word-wrap: break-word` 与明确宽度控制。
在使用 Flexbox 构建类表格结构（如本例中的 .table-container-0 → .table-row → .row-item-b）时，默认情况下 flex: 1 会尽可能拉伸子项，但不会主动触发文本换行——尤其当内容为无空格长字符串（如资源 ID、Base64 片段或连续英文单词）时，极易撑宽容器甚至破坏布局。
要实现「列内文本自动折行」，关键在于两点：
✅ 限制单列最大宽度（如 width: 33% 或 max-width: 200px），为换行提供边界；
✅ 启用强制断词换行，推荐使用现代兼容性更好的 word-break: break-word（已取代旧版 word-wrap），并辅以 white-space: normal 确保不被意外禁用。
以下是优化后的核心 CSS：
.table-container-0 {
display: flex;
flex-direction: column; /* 推荐显式写法，语义更清晰 */
background-color: white;
width: 90%;
margin: 0 auto;
border-radius: 4px;
border: 1px solid #DADADA;
}
.table-row {
display: flex;
width: 100%;
border-bottom: 1px solid #dadada;
}
.row-item-b {
flex: 1;
font-size: 16px;
padding: 8px 0;
display: flex; /* 保持居中能力 */
justify-content: center;
align-items: center;
word-break: break-word; /* ✅ 核心：允许在任意字符间断行（含长单词）*/
white-space: normal; /* ✅ 确保换行生效（避免 inherit nowrap）*/
/* width: 33%; ← 可选：若需严格等宽三列，可显式设宽 */
/* 或更健壮的做法： */
min-width: 0; /* ✅ 防止 flex 项因内容过长拒绝收缩（重要！）*/
}
⚠️ 特别注意：min-width: 0 是 Flex 子项能正常换行的隐藏关键点。因为 Flex 默认 min-width: auto，会阻止内容压缩，导致 word-break 失效。添加后，浏览器才允许该 flex 项在受限宽度内主动折行。
在 HTML/Jinja 模板中，无需修改结构，保持原有循环逻辑即可：
<div class="table-container-0">
<div class="table-row heading">
<div class="row-item-h2">Resource Name</div>
<div class="row-item-h2">Class</div>
<div class="row-item-h2">Access</div>
</div>
{% for usrres in usrress %}
<div class="table-row">
{% for value in usrres %}
<div class="row-item-b">{{ value }}</div>
{% endfor %}
</div>
{% endfor %}
</div>
? 进阶建议：
- 若“Resource Name”列需优先换行，而其他列（如 Class、Access）倾向保持紧凑，可为
.row-item-b:nth-child(1)单独设置flex: 2+word-break: break-word，其余列设flex: 1； - 对于超长纯数字/UUID，可叠加
hyphens: auto（需语言属性支持）提升可读性； - 移动端建议配合媒体查询缩小字体或切换为
flex-direction: column堆叠布局。
通过以上调整，即可在不引入 <table>、不依赖 JavaScript 的前提下，构建语义清晰、响应灵活且文本友好的 Flex 表格。</table>
