リストアイテム内の個々のテキストブロックを切り捨てる

Question

私は各アイテムが3つのパートに分割されたアイテムのリストを持っています。

<li>[long part(1)] [separator(2)] [important part(3)]</li> 

私は最初の部分（ "長い部分"）を折り返す代わりに切り捨てたいと思います。

最初の部分は折り返さないようにすることができますが、他の部分は折り返しますが、最初の部分を切り詰める方法を見つけることはできません。ここで

はcodepen例です：https://codepen.io/fiver/pen/rGRevq?editors=1010

は側に出力ペインを移動するChange viewボタンを使用してください。次に、スライダを使用して折り返し動作を確認することができます。 flexbox（ "flex try"）とスタイリングオーバーフロー属性（ "overflow try"）を使ってみましたが、どちらもビューからテキストを伸ばしています。

3番目の項目は私の回避策です（折り返してください）。私がやりたいことではありませんが、機能します。

私はその最初の部分を省略することができます（省略記号を付けてもしなくても）。

Edge（実際には入札取引ではありません）、Chrome、Firefox、Safari（モバイルとデスクトップ）では、これを最新のブラウザで使用する必要があります。私はIEやAndroidブラウザについて心配する必要はありません。

Answer 1

あなたの「オーバーフローの試み」作品が、あなたはスパンをこれら2

overflow: hidden; 
text-overflow: ellipsis; 

Answer 2

<li>で使用しているとして配置する必要があります。 CSSにdisplayプロパティを設定し、widthも設定する必要があります。

span { 
     display: block; 
     overflow: hidden; 
     text-overflow: ellipsis; 
     white-space: nowrap; 
     width: 40%; /* it be upto requirment */ 
    }