Zeichenkette auf gegebene Breite skalieren

Question

Ist es möglich, die Größe einer Zeichenkette mit CSS oder jQuery zu skalieren, wenn die Breite des zugewiesenen Platzes bekannt ist? Ich brauche es, um die Schriftgröße zu erhöhen, ohne die Zeichenfolge zu umhüllen.

Lassen Sie uns sagen, dass ich so etwas wie dieses:

<div style="width:600px">My text string here.</div> 

Ich nehme ich die Breite messen konnte durch das Einwickeln der Zeichenfolge in Spanne

JS:

var strWidth = $("#myStr").width(), 
    strFontS = 20; 

if (strWidth < 600) { 
    // maybe increase font-size 
    $("#myStr").css("font-size", strFontS + 1 + "px"); 
} 

HTML:

<div id="myDiv" style="width:600px"><span id="myStr">My text string here.</span></div> 

Answer 1

Sie müssen die Breite der Textbreite bei Schrift und Größe messen. Eine jQuery-Funktion zum Berechnen von textMetric. Danach kannst du eine Rate finden. Und vergrößern oder reduzieren Sie die Schriftgröße so, dass sie dem Element "Geben" entspricht.

Und hier mein einfaches Beispiel, wie es funktioniert: http://jsfiddle.net/PKkLL/7/

Answer 2

ist hier ein Plugin ich gemacht, die Sie

den Text, um die Größe verwenden können

$.fn.resizeText = function(){ 
    var size = parseInt($(this).css("fontSize")); 
    var html = $(this).html(); 
    var textLength = html.length; 
    var span = '<span>' + html + '</span>'; 
    $(this).html(span); 
    var width = $(this).find('span:first').width(); 
    $(this).html(html); 
    var newSize = $(this).width()/width*size; 
    $(this).css("fontSize", newSize); 
    return width; 
}; 

Verbrauch:

$("div").resizeText(); 

prüfen aus dem demo.