Ändern der Größe einer beliebigen Länge Zeichenfolge, um in eine feste Größe div

Question

Problem Lösung für dieses Problem zu finden. Ich habe eine "Taste" div 100px breit und 30px groß mit einem variablen Etikett. Ich möchte, dass die Schriftgröße sich selbst verkleinert, so dass der gesamte Beschriftungstext immer sichtbar ist.

JS oder CSS-Lösungen funktionieren beide für mich, nur keine jquery.

Im Flash löste ich dieses Problem, indem ich die Anzahl der Textzeilen überprüfe, wenn es über 1 ist schrumpfe die Schriftgröße, bis alles in eine Zeile passt. Nicht sicher, ob das in Javascript möglich ist.

Edit: Nicht ein Duplikat, diese Person hatte einen Container variabler Größe, so dass verschiedene Lösungen möglich waren.

Answer 1

Eine Sache, die Sie hier tun können, ist, den Beschriftungstext in eine ähnliche Größe des div mit folgenden CSS-Attributen zu bekommen und dann scrollwidth zu zählen, dann eine JavaScript-Schleife zu schreiben und die Schriftgröße um einige Pixel zu verringern, bis Sie scrollwidth finden weniger als Ihre gewünschte Breite.

white-space: pre; 
overflow-x: scroll; 

Kleine Javascript-Code, den ich

// dummy divelement 
var divElement = document.getElementById('#myelement') 
var fontSize = 15; // Starting from 15 
while(divElement.offsetWidth < divElement.scrollWidth) { 
    divElement.style.fontSize = fontSize + "px" 
    fontSize--; 
} 

versucht Ist Ihre Frage beantworten? oder soll ich dir ein ganzes Beispiel geben?