html - Chromeでの垂直ブレットの配置?

Question

私は次のHTMLを持っています:

<ul>
    <li><span class="overflow">This is some more text</span></li>
    <li><span class="overflow">This is some more text</span></li>
    <li><span class="overflow">This is some more text</span></li>
    <li><span class="overflow">This is some more text</span></li>
    <li><span class="overflow" style="display: inline-block;">This is some more text This is some more text This is some more text</span><br /><span>This is some more text This is some more text</span></li>
</ul>

この CSS を伴う:

ul { list-style-position: outside; list-style-type: circle; width: 150px; }

.overflow { display: block; height: 40px; overflow: hidden; }

何らかの理由で、overflow: hiddenスパンを持つリスト項目には Chrome の箇条書きがありません。

まあ、最後のものを除いてすべて、どうやらオーバーフローCSSクラスに変更display: blockするとこれが改善されます。display: inline-blockただし、これにより、箇条書きが垂直方向の中央に配置されるため、別の問題が発生します。

すべてが理にかなっていることを本当に願っています...ここに説明するのに役立つフィドルがあります：http://jsfiddle.net/zUxTD/

結論として、Chrome で箇条書きを縦に並べる方法はありますか? そうでない場合、箇条書きが他のリスト項目に表示されない理由を誰か知っていますか (これは何らかのバグだと思います)。