2012-01-24 9 views
18

コンテナに合わせてサイズがスケールアップしていない、特に何のonloadイベントのjavascript:しているテキストは、これを行うことが可能であろう、CSSを使用して

あなたが広い150ピクセル、高さ100pxにのセルを持っています。 テキストが含まれています(例:$ 20,00またはその変形)。

コンテナのサイズに完全に合わせたいと思っています。

私はjavascriptでこれを行うことができます。パディング/マージンのないコンテナがセルの幅や高さに達するまで、テキストのサイズを変更します。またはオーバーフローがautoに設定されているものにオーバーフローなどが含まれているかどうかを確認します。

純粋なCSSでできますか?

フォントは固定サイズフォントではないことも考慮してください。あなたが好きな場合はArialを使用してください。

+1

jqueryを使用しないとできないと思います。この回答をチェックしてください:http://stackoverflow.com/questions/4408937/font-size-auto-adjust-to-fit – Robert

+0

。これは、純粋なCSSでは実行できません。 – Jonas

+0

あなたの最高の結果はおそらくあなたのfont-sizeでいくつかのcalc()マジックになるでしょう。私はそれを試してみましたが、実際には変数を持たずに個々の文字の幅を判断できない場合は、CSSでこれを行うことはできません。あなたはおそらく[FitText](http://fittextjs.com)を知っているでしょうが、それはそうでなければJSでこれを行う簡単な方法です - 多くの作業を節約します:)あなたがいくつかの興味深い解決策を思いついたら教えてください、btw 。 – fredrikekelund

答えて

6

一つのこと完璧ではありませんが、いくつかのケースで仕事を得ることができるのは、Xピクセルより小さな画面サイズに対して@mediaルールを使用し、フォントサイズを小さくまたは大きく設定することです。もちろん

h2{ 
    font-size:25px 
} 

@media screen and (max-width: 850px){/* for screens smaller then 850px, set the font size smaller */ 
    h2{ 
    font-size:19px; 
    } 
} 

これはテキストのみのコンテナのサイズが何らかの方法でウィンドウサイズに基づいていると仮定すると動作します。

関連する問題