Question

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

我经营一家小型网页设计公司，我经常要为客户制作一个可编辑的网站区域。例如，页面顶部可能有一个栏，用于宣传客户希望自己编辑的最新新闻或交易。

我遇到的问题是他们经常写得太多，文字溢出。也许我有点过于防守，但在这些情况下，我通常私下责怪客户 - 肯定是他们在更新文本后检查，发现它不合适，并修改它以便它做到了？

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

overflow: auto;

但有时这不合适，例如在上面描述的例子中，只有一行高。

我的问题（是的，我终于得到了它）是如何自动更改字体大小以使其适合框？

在某些应用程序中（以Powerpoint为例），您可以为字体大小选择“最适合”选项，应用程序会选择允许文本准确拟合的大小。我基本上都在寻找CSS，JavaScript或PHP版本。

提前致谢！

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

Answer 1

我感觉到你的痛苦！我们也有客户为我们提供的摘要对于分配的区域来说太长了;对于一些客户来说，显然他们甚至没有想到他们的文字可能太长了。： - ）

我在你的情况下做的是像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的匿名函数中。我相信你可以修改它以适合你的实现。

Answer 2

没有在HTML中试过这个，但你可以循环检查scrollHeight属性并查看它是否比你预期的要大，如果是这样，将字体设置为小一点，然后重复直到{{1}是你所期待的。

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

Answer 3

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

“最适合”字体大小 - 如何测量句子宽度？

3 个答案: