字體大小響應 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 無法做到這一點。

CSS-Tricks 的 Chris Coyier解釋了最佳解決方案，並且都使用 javascript。 但是，自己弄清楚是沒有意義的 - Coyier 討論了一些已經編寫好的可以為您完成工作的庫。

下面是使用您的代碼和第一個此類庫的示例：Dave Rupert 的FitText庫。 單擊按鈕以查看刪除三個 div 時會發生什么。

jsFiddle Demo（StackSnippets 目前不工作）

 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，則添加另一個字體大小，或多或少像所以：

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

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