如何定義哪個SPAN在父DIV溢出時首先摺疊：hidden

Question

我遇到以下期望：有一個導航欄（div具有固定高度），它有一個按鈕（封裝在一個div中）在左邊（浮動：左邊），右邊兩個（浮動：右邊）和剩餘中間區域中的標題+版本，與左邊對齊（跨度+跨度）。

我需要指定某種程度上，當用戶重新調整窗口大小時，首先第一個跨度爲「摺疊」並應用文本溢出：省略號屬性，當這個完全消失後，第二個跨度逐漸消失以及。

我不知道如何實現這一點，所以任何幫助來與我的自動欣賞！

.middle { 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

#title { 
    ??? 
} 

#version { 
    ??? 
} 

<div class="container"> 
    <div id="button1" class="pull-left">...</div> 
    <div id="button3" class="pull-right">...</div> 
    <div id="button2" class="pull-right">...</div> 
    <div id="middle-area" class="middle"> 
    <span id="title">very long title overflow should apply first</span> 
    <span id="version">version 1</span> 
    </div> 
</div> 

歡呼

Answer 1

你應該做的是與jQuery使用.resize()https://api.jquery.com/resize/

類似的東西：

$(window).resize(function() { 
     $("#title").animate({ 
      height: "0px" 
     }, 1500, function() { 

      $("#version").animate({ 
       height: "0px" 
      }, 1500); 
     }); 

    }); 

Answer 2

您需要使用CSS媒體查詢，它可以讓你根據屏幕大小修改css。