的CSS使標籤垂直是否已經溢出

Question

我有水平的標籤1爲，

我怎樣才能讓標籤垂直於窗口調整比已經溢出？ 這樣的：

我不想usign @media因爲標籤是DINAMIC並可能只有1-2個標籤，它會顯示在水平視圖

Answer 1

使用JS/jQuery的好計算標籤的總寬度並檢查它是否比容器寬度更粗糙。

var totalWidth = 0; 
var availableWidth = $('.tabs-container').width(); 

$('.tabs').each(function() { 
    totalWidth += $(this).outerWidth(true); 
}); 

$('.tabs-container') 
    .toggleClass('v-tabs', totalWidth >= availableWidth) 
    .toggleClass('h-tabs', totalWidth < availableWidth); 

Answer 2

您可以使用jQuery添加一個窗口上一個新的類調整

$(window).resize(function() { 
    $("tabs").addClass("nice looking class"); 
    } 

其他

比這個我會用一個負責任的網格。

Answer 3

基本上加入Justinas和Troajans共同的答案：

function checkTabWidths(){ 
     var totalWidth = 0; 
     var availableWidth = $('.tabs-container').width(); 
     $('.tabs-container').removeClass('v-tabs h-tabs'); 
     $('.tabs').each(function() { 
      totalWidth += $(this).outerWidth(true); 
     }); 
     if (totalWidth >= availableWidth) { 
      $('.tabs-container').addClass('v-tabs'); 
     } else { 
      $('.tabs-container').addClass('h-tabs');    
     } 

} 
$(window).resize(function() { 
    checkTabWidths(); // Check widths on resize 
} 
checkTabWidths(); // To check on load 

Answer 4

您可以使用jQuery來做到這一點：

//first get the container width 
var container=$("#containID").width(); 
//then get the total width of each tabs 
var totalWidthOfTabs=0; 
$("#containID .tabs").each(function(){ 
    totalWidthOfTabs+=$(this).width(); 
}); 
//when window resize, do something 
$(window).resize(function(){ 
    if(totalWidthOfTabs>container){ 
     $("#containID .tabs").css("width","100%"); 
    } 
}); 

只是一個想法，你想要做什麼。我不檢查它是否正確，如果例子錯誤，你可以改變它〜