基本的に、テキストの長さに応じてテキストのサイズを変更したい。「WWWWWWWWW」と書いた場合、100px div 内に収まるようにサイズ変更されます。「テスト」と書いた場合、100pxの制限を破らないため、サイズ変更されません。
もうお分かりだと思います。私は何でもオープンです。Javascript、php、あなたが提供しなければならないものは何でも。
基本的に、テキストの長さに応じてテキストのサイズを変更したい。「WWWWWWWWW」と書いた場合、100px div 内に収まるようにサイズ変更されます。「テスト」と書いた場合、100pxの制限を破らないため、サイズ変更されません。
もうお分かりだと思います。私は何でもオープンです。Javascript、php、あなたが提供しなければならないものは何でも。
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 }
固定幅のフォント (つまり、すべての文字が同じ幅) を使用する場合は、php または javascript を使用してこれを行うことができます。
strlen を使用して php の文字数を数えます。次に、フォントサイズをハードコードします。たとえば、この例はそれを行う方法を示しており、最善の方法ではありません。ご不明な点がございましたら、お知らせください。
コードは正しく動作しませんでしたが、
if(strlen($text)>5){
$fontsize = 11px;
}
等...
ユーザーのブラウザウィンドウのサイズに関係なくテキストを最適にフィットさせることができるので、javascriptはここであなたの友達だと思います(PHPでそれを行うと、特定のユーザーに対してオーバーサイズ/レイアウトが壊れます)。
同様の問題があったため、このために独自のプラグインを作成しました。1 つの解決策は、ここで説明されているように、縮小してフィットさせるアプローチを使用することです。ただし、複数の項目を合わせる必要がある場合や、ウィンドウのサイズ変更などのパフォーマンスに関心がある場合は、jquery-quickfit をご覧ください。
テキストの各文字が収まるサイズの不変測定値を測定および計算し、これを使用して、テキストがコンテナに収まる次善のフォントサイズを計算します。
計算はキャッシュされるため、複数のテキストを処理する場合や、ウィンドウのサイズ変更など、複数回テキストを合わせる必要がある場合に、非常に高速になります (2 回目のサイズ変更によるパフォーマンスの低下は事実上ありません)。
詳細なドキュメント、例、およびソース コードは、プロジェクト ページにあります。