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

Question

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

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

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

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

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

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