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

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

要回复问题请先登录注册