Javascript 仅当存在'；It’没地方了

我有一个动态创建的列表，每当用户单击按钮时，它就会添加到网页中。有时列表很短，这很好，但有时列表很长，从页面底部流出。如何使任何溢出都会创建一个新列？（我不希望列的长度相等-我希望第一列用于尽可能多的文本，下一列仅在第一列用完空间时使用。）

您可以将项目列表缩减为项目列列表（数组数组）。然后使用此选项呈现html：

var longList=[1,2,3,4,5,6,7,8,9,10,11]；
var htmlist=函数（列表）{
返回“
”+
list.map(
功能（列表项）{
返回“
”+列表项+”
”；
}
).join（“”）
+“
”
}
var htmlColums=函数（listOfList）{
返回listOfList.map(
功能（列表）{
返回“”+
htmlList（列表）+
"";
}
).加入（“”）；
}
//获取项目列表并返回列表项目列表
//列列表
var toColumns=函数（列表、项列）{
返回列表.reduce(
职能（行政协调会，项目）{
if（acc.slice（-1）[0]。长度===itemsInColumn）{
附件推送（[]）
}
附件切片（-1）[0]。推送（项目）；
返回acc；
}
,[[]]
)
};
document.getElementById（“createContent”）.addEventListener(
“点击”，
职能（e）{
var itemsInColumn=parseInt(
document.getElementById（“itemsInColumn”）.value
,10
);
如果（isNaN（itemsInColumn））{
itemsInColumn=3；
}
document.getElementById（“内容”）.innerHTML=htmlColums(
toColumns（长列表、itemsInColumn）
);
}
)