2

titleMySQL データベースからを取得する単純な固定幅レイアウトがあるとします。

CSS:

 #wrapper {
    width: 800px;
 }

 h1 {
    width: 100%;
 }

HTML:

 <html>
  <body>
   <div id="wrapper">
    <h1> $titleString </h1>
   </div>
  </body>
 </html>

しかし問題は、MySQL データベースから取得されるタイトル文字列の長さが大きく異なることです。10 文字の場合もあれば、80 文字の場合もあります。最小文字数と最大文字数を設定することができます。

可能であれば、文字列が 1 行だけになり、その行の長さに最適になるように、オンザフライで拡大/縮小するにtext-sizeはどうすればよいですか? <h1>$titleString</h1>div のサイズ変更に関する多くの質問を見てきましたが、私の場合、div は常に 100% (800px) である必要があり、タイトルを最適に合わせたいと考えています。

明らかに最大text-size値を設定して、5 つの文字列が巨大にならないようにする必要があります。

誰か提案がありますか？現在、このページでは PHP/MySQL/CSS のみを使用していますが、問題を解決できるのであれば、別の言語を組み込んでも問題ありません。

私が考えることができる唯一のことは、試行錯誤を通じてCSSemサイズと一致する許容可能な文字列文字数範囲を確立するブルートフォースアプローチですが、それはコード側から見るとかなり醜い実装になります.

4

2 に答える 2

2

私はphpで非常に単純なアプローチを使用していくつかの運がありました。アプリケーションに合わせて数字を試してみてください。フォントサイズ：1.65emで約30文字に収まるタイトル用のスペースがあったので、次のように、それに比例して長いタイトルを小さくしました。

$title = $row->title;
$title_length = strlen($title);
if ($title_length > 30)
    $title_size = 1.65 * (30 / $title_length);
else $title_size = 1.65;

print('<span style="font-size: '.$title_size.'em;display: inline;">'. $title.'</span>');
于 2012-02-08T17:27:32.727 に答える
1

おそらく1つの解決策は、javascriptを使用して、特定のテキストの幅を標準のフォントサイズで計算し、適切な幅になるまでサイズを変更することです。Javascript では、次のようにテキストの幅を計算できます。

 var title = document.getElementById("title");
 var width = title.offsetWidth;

最初に、テキストは、フォント サイズ以外のスタイルが適用されていないスパンに配置されます。

 <span id="title">The Title</span>

次に、テキストの幅が 800px より大きいかどうかを確認し、幅が以下になるまで font-size を小さくします。タイトル スパンに最初に他のスタイルが適用されていないことが重要です。そうしないと、結果が正しくなくなります。

幅が短すぎるかどうか、おそらく 200px 未満かどうかを確認し、それに応じて font-size を大きくすることもできます。

テキストのサイズが適切であることを確認したら、テキストを h1 に移動し、font-size を設定します。

この質問では、テキスト幅の計算について説明しています。

たとえば、jQuery を使用してこれをすばやく作成しました。次のような HTML があるとします。

<span id="mytitle" style="font-size:14pt;">
    A very long title that may be more than 800px in width. And even longer.
</span>

コンテナではなくテキストの幅に合わせてサイズが変更されるため、スパンを使用しました。そしてjQueryコード：

 $(document).ready(function(){        
    var w = $("#mytitle").width();
    while(w > 800){
       var currentFontSize = $('#mytitle').css('font-size');
       var currentFontSizeNum = parseFloat(currentFontSize, 10);
       var newFontSize = currentFontSizeNum*0.95;
       $('#mytitle').css('font-size', newFontSize);
       w = $("#mytitle").width();
   //alert("Width:" + w);
}
  });

つまり、全体の幅が 800px 以下になるまで、font-size を 5% ずつ繰り返し縮小します。

于 2010-03-12T02:50:51.343 に答える