div中的動態字體大小

Question

嗨，我的字體大小有問題。如果我寫太長的世界，我希望字體大小自動縮放（p元素類mainPromoText），沒有滾動條，但它不會發生。
這是我的HTML和CSS代碼：

body { 
 
    background-color: #1a1e22; 
 
} 
 

 
.firstPageLogin { 
 
    background-color: #32322f; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    min-height: 15vh; 
 
} 
 

 
.mainAppName { 
 
    color: #ffffff; 
 
    font-size: 2vw; 
 
    text-align: center; 
 
    padding: 10vh; 
 
} 
 

 
.mainPromoText { 
 
    color: #ffffff; 
 
    font-size: 10vw; 
 
    text-align: center; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
/* 
 
section { 
 
    position: relative; 
 
    top: 24%; 
 
    text-align: center; 
 
} 
 

 
.loginCheckbox { 
 
    color: #ffffff; 
 
} 
 
.loginCheckboxText { 
 
    color: #ffffff; 
 
} 
 
*/

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<div class='container-fluid'> 
 
    <div class="row justify-content-start"> 
 
    <div class='col-sm-12'> 
 
     <p class='mainPromoText'>zyciakjgjdfhghjkdhfgkjdghfjdgkfjdlkfjgdkljldkjgkljdfkgljfdklgjdflkdgfjgkld</p> 
 
     <p class='mainAppName'>Apka</p> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class='container-fluid firstPageLogin col-sm-offset-4 col-sm-4' style='max-width: 80vw;'> 
 
    <div class="row-justify-content-start"> 
 
    <div class="col-sm-offset-4 col-sm-4" style='background-color: #ffffff'></div> 
 
    </div> 
 
    <div class="row-justify-content-end"> 
 
    <div class="col-sm-offset-4 col-sm-4" style='background-color: #ffffff'></div> 
 
    </div> 
 
</div>

感謝您的幫助

Answer 1

Fittext.js可能是一個解決辦法：

$(".mainPromoText").fitText(); 

您可以微調的效果將float傳遞給函數：

$(".mainPromoText").fitText(1.2); 

如果你需要一個最小或最大font-size：

$(".mainPromoText").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' }); 

還有一個non-jQuery version：

window.fitText(document.getElementsByClassName("mainPromoText")[0]); 

用於演示退房http://fittextjs.com/。

希望這會有所幫助！