可能性の重複：私は正しいフォントを設定する必要があり、小さなフラッシュカードメーカーアプリについては
resize font to fit in a div (on one line)CSS：テキストは、容器全体を占めるようサイズにフォントを設定し
sizeは、固定サイズのコンテナの利用可能な幅をテキストで埋めるようにします。この写真の4つのボックスのテキストのように： 
this questionには、PHP GDを使用したソリューションが提供されています。この問題のCSSまたはJavaScriptのクライアントサイドのソリューションはありますか？
それは強引ではありません。）
HTML：
<span id="txt">Lorem</span>
<div id="card"></div>
CSS：jQueryのを使用して
#card {
width: 150px;
height: 50px;
border: 1px solid black
}
#txt {
display: none
}
JS（）：ここ
var size_w = (150/$('#txt').width() - 0.05);
var size_h = (50/$('#txt').height() - 0.05);
var size = size_w>size_h?size_h:size_w;
$('#card').css('font-size', size + 'em');
$('#card').text($('#txt').text());
フィドル：http://jsfiddle.net/cwfDr/
今、高さと幅の両方をカバーしています。 ;）
私はこの数年前に調べましたが、狂ったことを引き起こさなかった唯一の論理的な方法は、数字の代わりに画像を使用して、それに基づいて必要な画像のサイズを計算することでした。コンテナの幅（テキストもあります）。また、数字/テキスト用に選択された固定幅のフォントを使用しました。
別の方法としてはより多くの制御を与えフラッシュテキスト置換、次のとおりです。http://www.mikeindustries.com/blog/archive/2004/08/sifr
それが広く場合はサポートされないかもしれないが（過去数年にわたって開発している、そしておそらくCSS3を助けることができる他の技術があるかもしれませんがそれはありますが）イメージ技術は私たちに最高の打撃を与えました。
+1 - sIFRは本当の救助者です。本当にありがとう。 –
問題ありません。私が言ったように、それぞれの方法には欠点がありますが、画像置換の方法は問題が少なく、最も直接的な答えであり、欠点は最小限であると判断しました。 sIFRは確かに良い方法です。特に、フォント自体をサーバーから制御できるためです。 –
私はこの小さな、小さなプラグインは、ブラウザのウィンドウに合うようにこれを書いた。
(function($){
$.fn.extend({
sizeFont: function() {
return this.each(function() {
$obj = $(this);
$obj.css({fontSize:($(window).width()/$obj.width())+'em'});
});
}
});
})(jQuery);
私はあなたが好きに$(window)を切り替えることで、ニーズに合わせて、これを変更することができます確信しています。ここでは、ライブです：
+1 - クールな小さなプラグイン。ありがとう。 –
ところで、* 262 3は786ですが、ちょうどそれを無視してみましょう！ –
@ペッカ - 悲しいことに、それは本当です。閉鎖に投票する - 申し訳ありません。 –
まったく問題ありません。このために重複しないでください。 –