動的な幅float-left省略記号

Question

私は1行の固定幅のコンテナdivと2つの可変幅spanを持っています。最初のspanのオーバーフローは、省略記号で隠す必要があります。 2番目のspanは右側に浮かびます。完全に表示する必要があります。 this Fiddleを参照してください。

<div class='container'> 
    <span class='left'>Long long variable stuff</span> 
    <span class='right'>Changing stuff</span> 
</div> 

は、私が最初に spanの幅を動的二 spanの幅に合わせて調整したいので、同じライン上の両方 span滞在。どうやってやるの？ .right上 flex: 1で、 .leftはそのサイズを調整し、オーバーフローが非表示になりますので

Answer 1

あなたは、Flexboxを使用することができます。

.container { 
 
    width: 200px; 
 
    display: flex; 
 
    border: 1px solid black; 
 
} 
 
.left { 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    overflow: hidden; 
 
} 
 
.right { 
 
    flex: 1; 
 
    white-space: nowrap; 
 
}

<div class='container'> 
 
    <span class='left'>Long long variable stuff</span> 
 
    <span class='right'>Changing stuff</span> 
 
</div>

Answer 2

私はCSSを動的にjavascriptをせずに要素の長さを知るためにどのような方法がないと思います。あなたが純粋にCSSソリューションを探しているなら、あなたが望む幅を知るためにある方向を与える必要があるでしょう。視覚的には、少し妥協するかもしれませんが、すべてが常に1行に収まるようにすることができます。

私はあなたが知る必要があることを提案しようとしています 2つの幅。この場合、私はあなたが右の "変化するもの"を推測できると言うつもりです。

最初の問題は、デフォルトでinline要素である - inline-blockではないということです。オーバーフローテキストプロパティを機能させるには、inline-blockまたはblock要素を使用する必要があります。

次の部分はcalcです。 Calcは混合測定を除いて、正確なピクセル値をパーセント値から差し引くことができます。これは反応のよいレイアウトではうまくいきます。

私が説明するためにあなたのplunkerの更新されたバージョンを作成しました：right`： https://jsfiddle.net/n19ddahb/5/