css - CSS div-table と text-overflow:ellipsis

Question

テーブルを表示するdivがあります。このテーブルがページの 100% を占めるようにしたいと考えています。テーブル内には、複数のセルを含む 1 つの行が表示されます (テーブルセルの表示スタイル)。私の目標は、テキストが長すぎる場合に表のセルに省略記号を表示できるようにする CSS ソリューションです。問題を示す簡単な例 jsFiddle をまとめました。

セルに省略記号を表示させるために、誰かが私を正しい方向に導くことができますか?

jsfiddle

<div class="table-wrap-wrapper">
    <div class="table">
       <div class="table-row">
           <div class="table-cell data">
               <span>This_is_a_really_long_username_that_is_too_long</span>
           </div>
           <div class="table-cell">
           </div>   
           <div class="table-cell data">
                <span>This_is_a_really_long_emailAddress_that_is_too_long</span>
           </div>
           <div class="table-cell">
           </div>   
           <div class="table-cell data">
                <span>This_is_a_really_long_string_that_is_too_long</span>
           </div>     
       </div>
    </div>
</div>