的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%"); 
    } 
}); 

只是一个想法，你想要做什么。我不检查它是否正确，如果例子错误，你可以改变它〜