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

问题描述

| 我遇到了定制内容管理系统设计中的一个常见问题。我经营一家小型网页设计公司，经常需要对客户的网站进行某些区域的编辑。例如，页面顶部可能有一个栏，用于宣传客户希望能够自己编辑的最新新闻或交易。我遇到的问题是他们经常写太多东西，文本溢出。也许我有点过于防御，但是在这种情况下，我通常会私下责怪客户-当然，他们会在更新文本后进行检查，发现它不合适，然后对其进行修改以使其正确吗？无论如何，我想让网站看起来更好是我的责任，所以我一直在尝试寻找一种使文本适合固定大小的框的方法。一种方法是为该框（通常为div）赋予此CSS属性：

overflow: auto;

但是有时候这是不合适的，例如在上述示例中，条形图只有一行高。我的问题（是，我终于明白了）是如何自动使字体更改大小以使其适合盒子？在某些应用程序中（Powerpoint是一个示例），您可以为字体大小选择一个“最适合”选项，而应用程序选择的大小可以使文本准确适合。我基本上是在寻找CSS，JavaScript或PHP版本。提前致谢！编辑：这是解决方案-http://jsfiddle.net/Cnkfn/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中执行的匿名函数中。我相信您可以修改它以适合您的实现。 ,还没有在HTML中尝试过此方法，但是您可以循环检查scrollHeight属性，看看它是否比您期望的大，如果这样，请将字体设置为小1点，然后重复执行，直到scrollHeight是您所期望的。 https://developer.mozilla.org/en/DOM/element.scrollHeight ,

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

句子大小大小字体字体宽度宽度测量