JavaScript实现数组字符单行网格展示 修复竖排及空盒问题

问题根因 #

• 空盒子问题：数组合法下标范围为0 ~ 数组长度-1，原循环初始值设为questionParse.length，会访问到不存在的数组索引，取到undefined后渲染为空内容盒子，同时会破坏洗牌逻辑的正确性。
• 竖排问题：原CSS仅给子盒子设置display: grid用于实现盒子内部文字居中，未给父容器设置横向排列规则；子元素设置display: grid后会变为块级元素，默认独占一行，最终呈现单列竖排效果。

修复后代码 #

JavaScript 逻辑修正 #

将循环初始值改为数组最后一个合法下标，先完成数组打乱再遍历创建元素，避免逻辑混杂：

// 解析获取待渲染的字符数组，示例输入"surreal"会得到['s','u','r','r','e','a','l']
var questionParse = JSON.parse(currentQuestion.question);
// 正确实现Fisher-Yates洗牌，打乱数组顺序
for (let i = questionParse.length - 1; i > 0; i--) {
    const randLetters = Math.floor(Math.random() * (i + 1));
    [questionParse[i], questionParse[randLetters]] = [questionParse[randLetters], questionParse[i]];
}
// 清空父容器原有内容，避免重复渲染
questionTxt.innerHTML = '';
// 遍历打乱后的数组，逐个创建字符盒子
questionParse.forEach(char => {
    const anagrammeLetter = document.createElement('span');
    anagrammeLetter.className = "box";
    anagrammeLetter.textContent = char;
    questionTxt.appendChild(anagrammeLetter);
});

CSS 样式修正 #

保留原有.box样式，新增父容器横向排列规则即可：

/* 父容器横向排列，选择器替换为你实际使用的questionTxt容器选择器 */
.question-txt {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
}
.box {
    width: 60px;
    height: 60px;
    border: 2px solid var(--empty);
    color: black;
    text-transform: uppercase;
    display: grid;
    place-items: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 2.4rem;
}

如果偏好使用Grid布局实现父容器排列，可将父容器样式替换为：

.question-txt {
    display: grid;
    grid-auto-flow: column;
    gap: 8px;
    align-items: center;
}

Tailwind CSS 实现方案 #

无需编写自定义CSS，直接给元素添加对应工具类即可：

• 父容器添加类名：flex flex-row gap-2 items-center
• 动态创建的字符span添加类名：w-[60px] h-[60px] border-2 border-[var(--empty)] text-black uppercase grid place-items-center font-sans text-[2.4rem]

实现效果 #

内容的提问来源于stack exchange，提问作者chubby marschmallow