管理オーバーフローが

Question

私はこれらのリスト項目を表示したい

[、「完了」........「を実行」、「失敗」]文字列

のリストを持っています下のようなdiv。

私は成功し、これをコード化されたが、私は直面しています問題は、このリストが成長するときのdivが混雑取得を開始しています。私が欲しいのは、divの最初の行が完了し、それ以上の項目を収容することができなくなったときで、次の行が適切なパディングと間隔で同じdivで開始されるべきときです。

以下のようなものが

どれを（他のスタイリングは、下の画像に適用されず、画像はちょうど私が行は、画面のサイズ変更上のdivに積層されるようにする方法を説明するために追加されていることに注意してください）ここのポインタは本当に感謝しています。

詳細コードは、あなたが親と子のコンテナが必要Applying styles onHover and onClick

Answer 1

：

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>

このことができますし、これは何が必要であると思います。

Answer 2

を見ることができます。これらのテキストのそれぞれは、内側に配置されているspan内にラップされますあなたが好き、flex-wrap: wrapプロパティで、このためCSS Flexboxを試すことができます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>