管理div中的溢出

Question

我有一个字符串列表

[＆＃39;失败＆＃39;，＆＃39;正在运行＆＃39;，＆＃39;已完成＆＃39; ........]

我想在下面的div中显示这些列表项。

我成功编码了这个，但我遇到的问题是当这个列表增长时，div开始变得拥挤。我想要的是当div中的第一行完成并且不再能够容纳任何其他项目时，应该在同一个div中启动具有适当填充和间距的下一行。

下面的内容（请注意，下图中未应用其他样式，仅添加图片以说明我希望在屏幕调整大小时将行堆叠在div中）

这里的任何指示都非常感谢。

可以看到详细代码Applying styles onHover and onClick

Answer 1

您需要父容器和子容器。这些文本中的每一个都将包含在span内，div位于let listOfString = ['failed', 'running', 'completed', 'failed', 'running', 'completed', 'failed', 'running', 'completed', 'failed', 'running', 'completed'] let _string = ''; listOfString.forEach(function(item) { _string += '<span class="itemText">' + item + '</span>' }) document.getElementById("textHolder").innerHTML = _string

内

#textHolder {
  width: 200px;
  height: auto;
  border: 2px solid red;
}

.itemText {
  width: auto;
  padding: 10px;
  display: inline-block;
}

<div id='textHolder'></div>

 #mat 4    //count of mat type of objects
 #lit 1
 #obj 4     //count of objects in scene

mat                     //mat object
ka   0.5 0.5 0.5
kd   1 0 0
ks   1 1 1
sh   10 

lit                    //lit object
color    1 0.7 0.7
pos -10 10 10

triangle                //scene object
v1   1 0 0
v2   0 1 0
v3   0 0 1
mat 0

Answer 2

您可以使用flex-wrap: wrap属性尝试 CSS Flexbox ，例如：

ul {
  display: flex;
  flex-wrap: wrap;
}

请看下面的代码段：

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

ul li {
  border: 2px solid green;
  margin: 10px 20px;
}

<ul>
  <li>Running</li>
  <li>Completed</li>
  <li>Failed</li>
  <li>Failed on Dependency</li>
  <li>In progress</li>
  <li>Upcoming</li>
  <li>Is Not Started</li>
</ul>

希望这会有所帮助，这就是你所需要的。