响应 DIV 大小的字体大小

Question

我正在创建一个页面，其中包含一些元素，它们可以隐藏也可以不隐藏。我想知道是否可以根据我的 div 调整我的字体大小？

例如，当我显示 2 个元素时，我希望我的文本比我有 5 个时更大，这样我的文本会更适合空间。

我的 JavaScript 代码，定义元素是否隐藏。

var val_kpi = $("#t3_teste_B_kpi").text();
var val_kpi_clean = Number(val_kpi.replace(/[^0-9.-]+/g,""));

if (val_kpi_clean != null && val_kpi_clean != 0){
    $("#t3_teste_B").css("display", "");
}else{
    $("#t3_teste_B").css("display", "none");
}

.tier3_test{
    width:50%;
    min-height: 100px;
    height: auto;
    margin-right: 2.5px ;
    
    /*Configurações Visuais */
    background: #FFF;
    
    /*Configurações da Borda */
    border: 5px solid;
    border-image-slice: 1;
    /* border-radius: 30px 30px 30px 30px; */
    border-image-source: linear-gradient(to left, #2B6640, #66B512);
}
    
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
    
.tier3_in{
    margin: 10px 5px 10px 5px;
    width:100%;
}
    
    
.kpititle3{
    font-weight: bold;
    color: #000;
    font-size: calc(8px + (12 - 8) * ((100vw - 300px) / (1600 - 300)));
}
    
    
.kpitext3 {
    font-size: calc(10px + (16 - 10) * ((100vw - 300px) / (1600 - 300)));
    font-weight: bold;
}
    
    
.no-wrap{
    white-space: nowrap;
}

<div class="tier3_test flex-center">
    <div class="tier3_in" id="t3_teste_A">
      <span class="kpititle3">A</span>
      <p><span class="kpitext3" id="t3_teste_A_kpi">VALOR 1</span></p>
    </div>

    <div class="tier3_in" id="t3_teste_B">
      <span class="kpititle3">B</span>
      <p><span class="kpitext3" id="t3_teste_B_kpi">VALOR 2</span></p>
    </div>

    <div class="tier3_in" id="t3_teste_C">
      <span class="kpititle3">C</span>
      <p><span class="kpitext3" id="t3_teste_C_kpi">VALOR 3</span></p>
    </div>

    <div class="tier3_in" id="t3_teste_D">
      <span class="kpititle3">D</span>
      <p><span class="kpitext3" id="t3_teste_D_kpi">VALOR 4</span></p>
    </div>

    <div class="tier3_in" id="t3_teste_E">
      <span class="kpititle3">E</span>
      <p><span class="kpitext3" id="t3_teste_E_kpi">VALOR 5</span></p>
    </div>
</div>

我得到的结果：

我想要的结果：

Answer 1

使用简单的 CSS 无法做到这一点。

Chris Coyier 在 CSS-Tricks explains the best solutions，并且都使用 javascript。但是，自己搞清楚是没有意义的 - Coyier 讨论了一些已经为您完成这项工作的库。

以下是使用您的代码和第一个此类库的示例：Dave Rupert 的 FitText 库。点击按钮查看删除三个 div 后会发生什么。

jsFiddle Demo (StackSnippets not working at the moment)

var grow_factor = $('.tier3_in').length / 2;
$('.tier3_test').fitText( grow_factor );

/* Below is just to remove divs for demo... */
$('button').click(function(){
   $('#t3_teste_C, #t3_teste_D, #t3_teste_E').remove();
   var grow_factor = $('.tier3_in').length / 2;
   $('.tier3_test').fitText( grow_factor );
});

.tier3_test{
    width:50%;
    min-height: 100px;
    height: auto;
    margin-right: 2.5px ;
    
    /*Configurações Visuais */
    background: #FFF;
    
    /*Configurações da Borda */
    border: 5px solid;
    border-image-slice: 1;
    /* border-radius: 30px 30px 30px 30px; */
    border-image-source: linear-gradient(to left, #2B6640, #66B512);
}
    
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
    
.tier3_in{
    margin: 10px 5px 10px 5px;
    width:100%;
}
    
    
.kpititle3{
    font-weight: bold;
    color: #000;
}
    
.no-wrap{
    white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/jquery.fittext.js"></script>

<div class="tier3_test flex-center">
    <div class="tier3_in" id="t3_teste_A">
      <span class="kpititle3">A</span>
      <p><span class="kpitext3" id="t3_teste_A_kpi">VALOR 1</span></p>
    </div>

    <div class="tier3_in" id="t3_teste_B">
      <span class="kpititle3">B</span>
      <p><span class="kpitext3" id="t3_teste_B_kpi">VALOR 2</span></p>
    </div>

    <div class="tier3_in" id="t3_teste_C">
      <span class="kpititle3">C</span>
      <p><span class="kpitext3" id="t3_teste_C_kpi">VALOR 3</span></p>
    </div>

    <div class="tier3_in" id="t3_teste_D">
      <span class="kpititle3">D</span>
      <p><span class="kpitext3" id="t3_teste_D_kpi">VALOR 4</span></p>
    </div>

    <div class="tier3_in" id="t3_teste_E">
      <span class="kpititle3">E</span>
      <p><span class="kpitext3" id="t3_teste_E_kpi">VALOR 5</span></p>
    </div>
</div>
<button>Remove 3 Divs</button>

Answer 2

在您的 javascript 中，只需将两个额外类（.big-font 和 .small-font）之一添加/删除到您的包装 div（.tier-3-test）中，以判断其元素是否被删除。然后，在您的 CSS 中，您为额外的类 1 定义一个字体大小，如果包装器 div 包含全部 5 个，则添加该字体大小；如果包装器 div 包含较少的 div，则为额外类 2 添加另一个字体大小，或多或少像所以：

.big-font {
  font-size: 30px;
}

.small-font {
  font-size: 20px;
}