如题，假设我的 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做出来？