如題，假設我的 HTML 原始碼像這樣：
<ul class="my-custom-class">
<li>項目一</li>
<li>項目二</li>
<li>項目三</li>
...
</ul>
我希望讓這些項目用以下方式排版：
1. 每個項目寬度為10em：第1項從0em開始，第2項從10em開始，像這樣：
↓容器寬
項目１ 項目２ 項目３
項目４ 項目５ 項目６
2. 文字不在項目內折行：例如容器寬23em，第3項寬7em，則第3項從第2行0em開始
（而不是從第1行20em開始再把部分字元折到下一行）
↓容器寬
項目１ 項目２
項目３文字稍多 項目４ 項目５
3. 如果一個項目寬度超過10em，則其寬度延展為10em的整數倍：
例如第1項從0em開始、寬12em，則第2項從20em開始，依此類推。如下：
↓容器寬
項目１不巧字數稍微多了點 項目２ 項目３
項目４ 項目５ 項目６
4. 萬一有項目的寬度超過容器寬，則由0em開始，並且把放不下的字元折到下一行：
↓容器寬
項目１
項目２的文字恰好長得很離譜很離譜很離譜離譜很離
譜很離譜 項目３ 項目４
項目５ 項目６
請教各位高手：這樣的顯示效果要怎麼用純CSS做出來？