Verwalten von Überläufen in divs

Question

Ich habe eine Liste von Strings

[ 'nicht bestanden', 'laufen', 'abgeschlossen' ........]

ich diese Listenelemente angezeigt werden sollen in ein div wie unten.

ich diese erfolgreich codiert, aber das Problem, das ich bin vor, wenn diese Liste div lasteten beginnt immer wächst. Was ich möchte, ist, wenn die erste Zeile im Div abgeschlossen ist und nicht mehr in der Lage ist, weitere Elemente aufzunehmen, dann sollte eine nächste Zeile mit einem richtigen Padding und Abstand in demselben Div gestartet werden.

So etwas wie unten (beachten Sie, dass andere Styling nicht in das Bild angewendet wird unten und Bild wird nur hinzugefügt zur Veranschaulichung, wie ich Linien wollen in einem div auf dem Bildschirm Resize gestapelt werden)

Beliebig Zeiger hier wird wirklich geschätzt.

Detaillierte Code kann Applying styles onHover and onClick

Answer 1

Sie können versuchen, CSS Flexbox für diese mit flex-wrap: wrap Eigenschaft, wie:

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

Sehen Sie sich das folgende Snippet an:

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>

hoffe, das hilft und das ist, was Sie brauchen.

Answer 2

Sie benötigen einen Elternteil und ein Kind Container zu sehen. Jede dieser Text wird innerhalb eines span gewickelt, die im Inneren angeordnet sind, eine 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>