Dynamische Schriftgröße in Div

Question

Hallo ich habe ein Problem mit meiner Schriftgröße. Wenn ich zu lange Welt schreibe, möchte ich, dass die Schriftgröße automatisch skaliert (p-Element-Klasse mainPromoText), dass es keine Bildlaufleiste gibt, aber es wird nicht passieren.
Hier ist mein HTML und CSS-Code:

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>

Vielen Dank für Hilfe

Answer 1

Fittext.js eine Lösung sein könnte:

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

Sie können die Melodie Effekt Fein durch Übergabe eines float an die Funktion:

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

Und wenn Sie benötigen ein Minimum oder Maximum font-size:

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

Es gibt auch eine non-jQuery version:

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

Check out http://fittextjs.com/ für eine Demo.

Hoffe, das hilft!