web-dev-qa-db-ja.com

長い単語のフォントサイズを自動的に小さくする

私は電子商取引サイトに取り組んでいます。そこでは投稿と製品のタイトルはかなり狭いdivで表示される必要があります。親オブジェクトの幅に対して長すぎる単語を自動的に縮小するように指示しながら、提供されたスペースに自然に収まる単語に特定のフォントサイズを設定し、ハイフネーションの必要性を回避します。誰かが以前にこれを行う方法を考えたにちがいないようですが、私はウェブ上で解決策を見つけることができませんでした。私が答えに一番近いと思ったのは BigText jQueryプラグイン ですが、これは実際にあなた自身の改行を予測できる状況のために設計されています。私のタイトルはWordpressによって検索されdivにまとめて挿入されるので、このプラグインはすべてのWordが1行に収まるまでテキストを縮小します。何か提案がありましたら教えてください。どうもありがとうございました。最高の、ジョナサン

jquerycssjavascriptformattingtext
4
jfudem

私は、文字数に基づいてタイトルにCSSクラスを追加するという単純なアプローチを取って同様のことをしました。そのCSSクラスはletter-spacingやfont-sizeを減らします。

// Count the characters, taking Unicode into account
$chars = mb_strlen($post->post_title);

// For every 10 characters after the first 20, add a size
$size = max(0, ceil(($chars - 20) / 10));

// Generate the CSS class: x-long, xx-long, etc.
$class = ($size) ? str_repeat('x', $size).'-long' : '';

// Output
echo '<h1 class="'.$class.'">'.esc_html($post->post_title).'</h1>';

ただし、この方法は非常に単純です。フォントで表示される実際の文字幅は考慮されていません。そのためには、JavaScriptのアプローチが必要です。

5
Geert