本文介绍如何通过 JavaScript 动态计算按钮宽度，当子元素总宽超出容器限制时，自动将其拆分到多个 .parent 容器中，实现多行布局并保留 ::before/::after 装饰效果。
本文介绍如何通过 javascript 动态计算按钮宽度，当子元素总宽超出容器限制时，自动将其拆分到多个 `.parent` 容器中，实现多行布局并保留 `::before`/`::after` 装饰效果。
在响应式按钮组设计中，有时 CSS 的 flex-wrap: wrap 无法满足特定视觉需求——例如每个“行”需独立拥有左右延伸的 ::before 和 ::after 阴影装饰块（如题图所示）。此时，单纯依赖 CSS 换行会导致伪元素作用范围错乱。解决方案是用 JavaScript 主动拆分 DOM 结构：将原始所有 .child 元素按宽度阈值分组，分别注入独立的 .parent 容器中。
以下是推荐的稳健实现逻辑（已修复原代码中的关键缺陷）：
function splitChildrenByWidth() {
const wrapper = document.querySelector('.wrapper');
if (!wrapper) return;
const containerWidth = wrapper.offsetWidth;
const children = Array.from(document.querySelectorAll('.child'));
// Step 1: 获取每个子元素的渲染宽度（含 padding、gap 影响需预估）
const items = children.map(el => ({
element: el,
width: el.offsetWidth + 24 // +24px 模拟 gap: 24px 的右侧间距（首尾除外，后续处理）
}));
// Step 2: 贪心分组 —— 逐个累加，超限时新建 parent
let currentSum = 0;
let currentParent = null;
items.forEach((item, index) => {
// 若当前无 parent，或加入后会溢出，则创建新 parent
if (!currentParent || currentSum + item.width > containerWidth) {
currentParent = document.createElement('div');
currentParent.classList.add('parent');
wrapper.appendChild(currentParent);
currentSum = 0;
}
// 将元素移入当前 parent（注意：移除前先保存引用，避免 NodeList 动态变化干扰）
currentParent.appendChild(item.element);
currentSum += item.width;
// 补充：若非末尾项，再加一个 gap（模拟 flex-gap 效果）
if (index < items.length - 1) {
currentSum += 24;
}
});
}
// 页面加载完成后执行，确保样式已计算
document.addEventListener('DOMContentLoaded', splitChildrenByWidth);
// 可选：窗口缩放时重排（需防抖）
window.addEventListener('resize', () => {
setTimeout(splitChildrenByWidth, 100);
});✅ 关键优化说明：
- 使用 Array.from() 将 NodeList 转为真数组，避免 forEach 中 DOM 移动导致索引错乱；
- 采用贪心算法分组，确保每行尽可能填满，而非仅判断累计和是否首次溢出；
- 显式计入 gap 宽度（24px），更贴近真实布局占用；
- 支持 resize 重排（建议配合防抖提升性能）。
⚠️ 注意事项：
立即学习“Java免费学习笔记（深入）”；
- 该方案依赖 offsetWidth，需确保元素已渲染且未被 display: none 或 visibility: hidden 隐藏；
- 若按钮字体动态加载（如 Web Font），应在 font load 后再执行，或使用 document.fonts.ready.then(...)；
- ::before/::after 样式无需修改——每个新生成的 .parent 均自动继承原有伪元素规则；
- 如需服务端渲染兼容，建议将此逻辑封装为可水合（hydrate）的组件逻辑。
最终生成的 HTML 结构完全符合预期：多个 .parent 并列，各含若干 .child，且每个 .parent 独立承载左右延伸阴影，视觉上形成连贯的“带状分隔”效果。这比纯 CSS 方案更可控，尤其适用于需要精确控制每行容器行为的复杂 UI 场景。
