Stretch div作爲最後的手段

Question

我正在嘗試創建css來解決頁面標題旁顯示類似按鈕的問題。我有3例。

• 標題裝配到像按鈕
• 標題是長且流向多行到按鈕
• 標題的左側的左側具有溢出div和覆蓋等長字按鈕

我的問題：有沒有一種方法來設置DIV所以，當情況發生了3，股利增長和推動標題下方的按鈕一樣但對案例1和2保持相同的功能？

Answer 1

當單詞導致溢出時，動態刪除width。通過刪除width，導致按鈕向下移動，從而表現得像選項1 & 2.

用一些jQuery/JavaScript動態檢查這些div以查看一個單詞是否會導致溢出。

//Javascript function to remove width class when overflow occurs. 
//40em is an arbitrary width 
    $.each($('.ConstrainedDiv'),function() { 
     var wordregex = /\w+/g; 
     var content = $(this).html(); 
     var wordArray = content.match(wordregex); 
     for(var i = 0; i < wordArray.length; i++) { 
      if(wordArray[i].length > 40) { 
       $(this).removeClass('someWidth');//behavior changes if you remove this 
       break; 
      } 
     } 
    }); 

Fiddle。通過註釋標記行來注意行爲上的差異。 Note2分辨率和小提琴盒寬度問題[Demo在FF7中測試]