14

カスタマイズされたコンテンツ管理システムの設計に関する一般的な問題に直面しています。

私は小さな Web デザイン会社を経営しており、顧客が Web サイトの特定の領域を編集できるようにしなければならないことがよくあります。たとえば、ページの上部に、顧客が自分で編集できるようにしたい最新のニュースや取引を宣伝するバーがある場合があります。

私が抱えている問題は、書きすぎてテキストがオーバーフローすることが多いことです。私は少し自己弁護しすぎているのかもしれませんが、このような状況では、私は通常個人的に顧客を責めます - 確かに彼らはテキストを更新した後に確認し、それが適合しないことに気づき、適合するように修正しますか?

とにかく、サイトの見栄えを良くするのは私の責任だと思うので、テキストを固定サイズのボックスに収める方法を見つけようとしています. div1 つの方法は、ボックス (通常は) にこの css プロパティを与えることです:

overflow: auto;

しかし、バーが 1 行の高さしかない上記の例のように、これが適切でない場合もあります。

私の質問 (はい、ようやく解決しました) は、ボックスに収まるようにフォントのサイズを自動的に変更するにはどうすればよいですか?

一部のアプリケーション (Powerpoint は一例です) では、フォント サイズに「ベスト フィット」オプションを選択でき、アプリケーションはテキストが正確に収まるサイズを選択します。私は基本的に、これの CSS、JavaScript、または PHP バージョンのいずれかを探しています。

前もって感謝します！

編集:これが解決策です- http://jsfiddle.net/Cnkfn/1/

4

3 に答える 3

3

あなたの痛みが分かります！また、割り当てられた領域には長すぎる要約を提供してくれるクライアントもいます。一部のクライアントにとっては、テキストが長すぎる可能性があることを気にしないようです。:-)

あなたの場合に私がすることは、stackoverflowが行うことのようなものです：入力領域の下に、キーアップで更新されるテキストを示すボックスを表示します。高さが固定されたボックスを使用すると、テキストが長すぎる場合にすぐにわかります。その代わりに、次のようなものを試すことができます。

<style>
#outer {
  width:100px;
  height:40px;
  overflow-x:hidden;
  overflow-y:auto; /* To make it obvious the text is too long. */
  border:1px solid red;
}
#inner {
  width:100px;
}
</style>

<div id="outer">
  <div id="inner" style="font-size:16px">
    Lorem ipsum dolor sit amet, dui orci interdum sagittis,
    proin metus dui, justo in suspendisse dolor.
  </div>
</div>
<button onclick="checkFontSize()">Check font size</button>

<script>
function checkFontSize() {
  var o = document.getElementById('outer');
  var i = document.getElementById('inner');
  var fs = parseInt(i.style.fontSize);
  while(i.offsetHeight > o.offsetHeight) {
    fs--;
    i.style.fontSize = fs + 'px';
  }
}
</script>

内側のdivの高さが外側のdivの高さよりも大きいかどうかを確認します。これは、内側のdivにパディングがないことを前提として機能します（必要に応じて微調整できます）。内側のdivの高さが外側のdivの高さを超えなくなるまで、内側のdivのフォントサイズを1px減らします。

クライアントのテキストを表示するページにこのようなコードを含めることができます。その場合は、ondomreadyを実行する無名関数でラップするだけです。実装に合わせてこれを変更できると思います。

于 2011-05-26T21:10:57.123 に答える
0

HTML でこれを試したことはありませんが、ループしてscrollHeightプロパティをチェックし、予想よりも大きいかどうかを確認し、そうであれば、フォントを 1 ポイント小さく設定し、予想どおりになるまで繰り返しscrollHeightます。

https://developer.mozilla.org/en/DOM/element.scrollHeight

于 2011-05-26T18:56:20.747 に答える
-5 
Public Function GetStringSize(ByVal Str As String, _
                                         ByVal FName As String, _
                                         ByVal FSize As Integer, _
                                         ByVal FStyle As System.Drawing.FontStyle) As System.Drawing.SizeF

 Using graphics As System.Drawing.Graphics = System.Drawing.Graphics.FromImage(New System.Drawing.Bitmap(1, 1))
     Dim size As System.Drawing.SizeF = graphics.MeasureString(Str, New System.Drawing.Font(FName, FSize, FStyle, System.Drawing.GraphicsUnit.Pixel))
     Return size
 End Using

End Function
于 2011-05-27T12:06:23.553 に答える