CSSは可変コンテンツとウィンドウの幅を持つfloatを残しました

Question

私は可変ウィンドウサイズと3つのフローティングブロックを持つヘッダーを持っています。 最初は固定幅の右に浮動し、2番目は固定幅の左浮動です。最後の（varleft）は可変長の内容で左に浮動しています。私はそれがその幅に成長しながら、他のブロックの下に行くから、この第3のブロックを防ぎたい

<div id="header"> 
    <div id="right">test</div> 
    <div id="left">test</div> 
    <div id="varleft">very long text very long text very long text very long text very long text very long text very long text very long text very long text </div> 
</div> 

は、さらに、私はそれを長いコンテンツの二行目を与え、その後、省略記号で文字列を切り詰めたいです。

これらのブロックはブートストラップのnav-headerのブロックなので、他のものを使用することはできませんが、浮動小数点を移動することはできません。

これは成長しているテキストのテキストの例です： https://jsfiddle.net/mjq2tum0/

これは私が（固定幅の1行の省略記号のため除く）希望する結果である： https://jsfiddle.net/o90sm39L/

Answer 1

ちょうどあなたのCSSに追加します。

#varleft { 
    max-width: calc(100% - 306px); 
} 

Answer 2

私は、さらに、それはその幅に成長しながら、他のブロックの下に行くから、この第3のブロックを防ぎたいです長いコンテンツの2行目を与え、省略記号で文字列を切り捨てたい

ここに解決策があります。 プレーンな背景色がある場合にのみ機能することに注意してください。それはあなたのための問題ではない場合this awesome article

に触発されたよりも多くの

コード：

1.私はbox-sizing: border-box;を使用する方が実用的な検索：

#header > * { 
    box-sizing: border-box; 
} 

2. divの幅を変更するvarleft：

width: calc(100% - 300px); // 100% minus the width of #right and #left 

今、あなたのdiv varleftは、他のブロックの下に

3.を行くことはありませんvarleftに位置し、オーバーフローを追加：

overflow: hidden; 
    position: relative; 

4。省略記号...を作成すると

#varleft:before { 
    content: '...'; 
    position: absolute; 
    right: 0; 
    bottom: 0; 
} 
#varleft:after { 
    content: ''; 
    position: absolute; 
    right: 0; 
    width: 1em; 
    height: 40px; 
    background: white; 
} 

必要がない場合はここで...を非表示になりますのdivを作成する使用した擬似要素は抜粋です：

$(function(){ 
 
    var ranchr = "A BCDE FGHI JKLMN OPQRS TUVWX YZabcd efghijklm nopqr stuvwx yz"; 
 
\t setInterval(function(){ 
 
    if($("#varleft").text().length>100) 
 
     $("#varleft").text(""); 
 
    \t $("#varleft").append(ranchr.charAt(Math.floor(Math.random() * ranchr.length))); 
 
    },100); 
 
});

#header{ 
 
    border: 1px solid #000; 
 
    height: 42px; 
 
    width: 100%; 
 
    background: white; 
 
} 
 
#header > * { 
 
    box-sizing: border-box; 
 
} 
 
#right{ 
 
    border: 1px solid #f00; 
 
    float: right; 
 
    width: 150px; 
 
    height: 40px; 
 
} 
 
#left{ 
 
    border: 1px solid #0f0; 
 
    float: left; 
 
    width: 150px; 
 
    height: 40px; 
 
} 
 
#varleft{ 
 
    border: 1px solid #00f; 
 
    float: left; 
 
    width: calc(100% - 300px); 
 
    height: 40px; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
#varleft:before { 
 
    content: '...'; 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
} 
 
#varleft:after { 
 
    content: ''; 
 
    position: absolute; 
 
    right: 0; 
 
    width: 1em; 
 
    height: 40px; 
 
    background: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="header"> 
 
<div id="right">test</div> 
 
<div id="left">test</div> 
 
<div id="varleft"></div> 
 
</div>