テーブルセル内の流体div内のテキストを省略記号に切り捨てる

Question

私は3列固定の左右のレイアウトを持ち、中間のレイアウトは以下のようにしています。それは現在のように完全に動作します。しかし、私はそれにtruncateクラスを追加する場合、中間のdivの幅は、親の幅を超えて拡張されます。

私の質問は：流体レイアウトのテキストを切り捨て、流体レイアウト幅内に切り詰めたテキストを修正する方法です。私は中間div幅をハードコードすることは期待していないことに注意してください。この中div class=middleを置き換え、それはテキストを切り捨てるために失敗した場合はClick here

：クラスを切り捨てる追加する前に

Plunkr。

<div class="middle"> 
     <div class="truncate">This is a very long text that should be truncate</div> 
     <div class="truncate">This is a verry very long text that should be truncated</div> 
     </div> 

予想サンプル：このCSS以下

Answer 1

私は同じことを達成するためにあなたのコードを編集しました。

<div class="three-column-wrapper"> 
    <div class="left"> 
    Left 
    </div> 
    <div class="middle"> 
    <div class="truncate">This is a very long text that should be truncate This is a verry very long text that should be truncated</div> 
    <div class="truncate">This is a verry very long text that should be truncated</div> 
    </div> 
    <div class="right"> 
    123 
    </div> 
</div> 

    .three-column-wrapper { 
    width: 100%; 
    height: 50px; 
    display: table; 
    padding: 0; 
    margin: 0; 
    table-layout: fixed; 
} 
.left { 
    width: 40px; 
} 

.left, .middle, .right { 
    display: table-cell; 
    vertical-align: middle; 
} 
.middle { 
    background: red; 
} 
.truncate { 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    width: 100%; 
} 
.right { 
    width: 40px; 
    text-align: center; 
} 

私はテーブルのレイアウトを追加しました：固定親に何の幅が言及していない場合は、子のdivシェア等しい幅ことを保証します。また、幅が言及されていれば折り返されません。次に、切り捨てクラスに幅を追加しました。省略記号は、指定された幅なしでは機能しません。参照先here

Answer 2

を使用し、それはあなたを助けるかもしれない...

.middle div { 
display: -webkit-box; 
-webkit-line-clamp: 1; 
-webkit-box-orient: vertical; 
font-size :35px; 
overflow: hidden; 
}