14

我遇到了定制内容管理系统设计的一个常见问题。

我经营着一家小型网页设计公司，我经常需要为客户制作可编辑网站的某个区域。例如，页面顶部可能有一个栏，广告客户希望能够自己编辑的最新消息或交易。

我遇到的问题是他们经常写太多并且文本溢出。也许我有点过于防御，但在这些情况下，我通常会私下责怪客户——他们肯定会在更新文本后检查，意识到它不合适，然后修改它以使其合适？

无论如何，我想让网站看起来不错是我的责任，所以我一直在尝试找到一种方法让文本适合固定大小的框。一种方法是给盒子（通常是 a div）这个 css 属性：

overflow: auto;

但有时这并不合适，例如在上面描述的示例中，条形图只有一条线高。

我的问题（是的，我终于明白了）是如何使字体自动更改大小以使其适合盒子？

在某些应用程序中（Powerpoint 就是一个例子），您可以为字体大小选择“最适合”选项，并且应用程序选择允许文本完全适合的大小。我基本上是在寻找 CSS、JavaScript 或 PHP 版本。

提前致谢！

编辑：这是解决方案 - http://jsfiddle.net/Cnkfn/1/

4

3 回答 3

3

我感受到了你的痛苦！我们也有客户给我们的摘要对于分配的区域来说太长了；对于一些客户来说，显然他们甚至没有想到他们的文本可能太长了。:-)

在您的情况下，我所做的类似于stackoverflow 所做的：在输入区域下方显示一个框，显示他们的文本更新onkeyup。使用固定高度的框，当他们的文本太长时，他们会立即明白这一点。取而代之的是，您可以尝试以下方法：

<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 的字体大小减小 1px，直到内部 div 的高度不再大于外部 div 的高度。

您可以在显示客户端文本的页面上有这样的代码，在这种情况下，您可以将其包装在一个匿名函数中，该函数执行 ondomready。我相信您可以修改它以适合您的实施。

于 2011-05-26T21:10:57.123 回答
0

还没有在 HTML 中尝试过，但是您可能会循环并检查scrollHeight属性，看看它是否比您预期的大，如果是，请将字体设置为小一点，然后重复直到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 回答