Question

因此，我从以逗号分隔的 textarea 中获取数据，转换为数组并将它们全部附加到类为 chars 的 div。我希望 div 每行只附加 5 个孩子。

我的JS代码：

var board = document.getElementsByClassName("chars")[0];
var input = document.getElementById("charInput").value; 

function appendthem(){
    
    input = input.replace(/ /g,'')
    var array= input.split(",");

    for(var i=0; i<array.length; i++){
        var elem = document.createElement("p");
        var textnode  = document.createTextNode(array[i]);
        elem.appendChild(textnode);
        board.appendChild(elem);     
    }
}

我不知道 CSS 是否会在这里发挥作用。但是我的 div（字符）的 CSS 是：

.chars{
    padding: 20px 20px;
    display: flex;
    justify-content: space-evenly;
}

我试过了，但没有用：

var br = document.createElement("br");
        if( (i+1)%5 ==0 ){
            board.appendChild(br);   
        }
        else{
            board.appendChild(elem);    
        }

提前致谢！

Answer 1

您可以使用 grid 拆分为 5 列：

var board = document.getElementsByClassName("chars")[0];
var input = 'test,test,test,test,test,test,test,test,test,test,test,test,test,test,test,test,test,test'; 

(function appendthem()
{
    input = input.replace(/ /g,'')
    var array= input.split(",");

    for(var i=0; i<array.length; i++){
        var elem = document.createElement("p");
        var textnode  = document.createTextNode(array[i]);
        elem.appendChild(textnode);
        board.appendChild(elem);     
    }
})()

.chars {
    padding: 20px 20px;
    display: grid;
    grid-template-columns: auto auto auto auto auto;
}

<div class="chars"></div>

Answer 2

您可以尝试仅使用 css 在所有子元素上使用网格模板

display: grid;
grid-template-columns: repeat(5, 1fr);

如果您需要在元素之间添加间距，只需包含

grid-column-gap: 10px;

请注意，这与 flex 的效果不同，您需要进行不同的屏幕尺寸调整，因为这不是最佳响应设置。

无法附加 BR 标签

2 个答案: