Ändern Sie die Schriftgröße von Container

Question

Ich habe versucht, vorherige Beiträge auf dieser Website zu verwenden und sucht in Google, aber ich vermisse etwas.

var divContainer = ws_popupWindows.document.getElementById('sw_content'); 
 

 
divContainer.innerHTML = '<div id="sw_resize">' + msgTEXT.innerHTML + '</div>'; 
 

 
var spanContainer = ws_popupWindows.document.getElementById('sw_resize'); 
 
for (var newSize = 100; (newSize -= 10) && (divContainer.clientWidth < spanContainer.clientWidth);) { 
 
    spanContainer.style.fontSize = newSize + '%'; 
 
}

body { 
 
    width: 100%; 
 
    direction: rtl; 
 
    text-align: center; 
 
    background-color: AntiqueWhite; 
 
    font-size: 15vmin; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
h1 { 
 
    height: 20vh; 
 
    margin: 1vh; 
 
    text-align: right; 
 
    font-size: 100% 
 
} 
 
div { 
 
    max-height: 70vh; 
 
    background-color: Snow; 
 
    margin: 0 5vh; 
 
    padding: 2vh; 
 
    border-radius: 10vh; 
 
    overflow: hidden; 
 
    word-wrap: break-word; 
 
}

<div id="sw_content"> 
 
    <div id="sw_resize">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor 
 
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div> 
 
</div>

Aber es um die Größe des Textes nicht ändert sich. (Ich kann jQuery nicht verwenden, aber es sollte auch in reinem JS nicht so schwer sein).

S.S .: Ich kenne die Beiträge wie Dynamically resize font size to fit container size, aber es funktioniert immer noch nicht.

Answer 1

Verwenden Sie die scroll-Höhe von spanContainer im Vergleich zu clientHeight.

for (var newSize = 100; spanContainer.scrollHeight > spanContainer.clientHeight; newSize -= 10) 
{ 
    spanContainer.style.fontSize = newSize + '%'; 
}