静的div内に収まるようにテキストのサイズを変更する

Question

基本的に、テキストの長さによってテキストのサイズを変更したい。私が "WWWWWWWW"を書いた場合、100px divの内側に収まるようにサイズが変更されます。 "テスト"を書いた場合、100pxの限界を超えないため、サイズ変更されません。

私はあなたが今考えていると確信しています。 私は何でもオープンしています。 Javascript、PHP、あなたが提供するものは何でも。

Answer 1

Iそれはあなたがあなたのブラウザのウィンドウのサイズに関係なくテキストに最も適合することができるので、JavaScriptがあなたの友人だと思う（PHPでそれを行い、特大の/レイアウトが特定のユーザのために壊れた場合）。

私はこれと同じ問題を抱えていました。これにより、私自身のプラグインを作成することができました。 1つの解決策は、hereと記載されているように、シュリンク・ツー・フィット・アプローチを使用することです。 しかし、複数のアイテムに合わせなければならない場合や、ウィンドウのサイズ変更などのパフォーマンスに関係する場合は、jquery-quickfitをご覧ください。

これは、テキストの各文字に対してサイズ不変のメスを計算して計算し、これを使用して、テキストをコンテナに収める次の最適なフォントサイズを計算します。

計算はキャッシュされているため、複数のテキストを扱う場合や、ウィンドウのサイズ変更などのように複数回テキストに当てはめる場合、計算が非常に高速になります（2番目のリサイズからのパフォーマンスはほとんどありません）。

Demo for a similar situation as yours

さらにドキュメンテーション、例、およびソースコードは、プロジェクトページにあります。

Answer 2

固定幅のフォント（すべての文字が等しい幅）を使用する場合は、phpまたはjavascriptを使用してこれを行うことができます。

strlenを使用してPHPの文字数を数えます。フォントサイズをハードコードする。この例は、それを行う方法を示しており、実行する最善の方法ではありません。ご質問がある場合はお知らせください。

コードdidntの仕事を適切 しかし

if(strlen($text)>5){ 
    $fontsize = 11px; 
} 

等...

Answer 3

PHPでこのような何かを：

$length = strlen($string); 

if($length < 5) 
{ 
    $added_class = 'short'; 
} 
elseif($length < 10) 
{ 
    $added_class = 'medium'; 
} 
else 
{ 
    $added_class = 'long'; 
} 

echo '<div class="normal_class '.$added_class.'">'.$string.'</div>'; 

をそして、あなたのCSSファイルで：

div.short { font-size: 15px } 
div.medium { font-size: 13px } 
div.long { font-size: 10px }