"最佳匹配”;font size-如何测量句子宽度

"Best fit" font size - how do I measure a sentence width?

本文关键字：测量 句子 何测量 size- 最佳 quot font      更新时间：2023-09-26

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

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

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

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

overflow: auto;

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

我的问题（是的，我终于做到了）是如何让字体自动改变大小，使其适合盒子？

在某些应用程序中（Powerpoint就是一个例子），您可以选择字体大小的"最佳匹配"选项，应用程序会选择一个允许文本精确匹配的大小。我基本上是在寻找这方面的CSS、JavaScript或PHP版本。

提前感谢！

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

我感觉到你的痛苦！我们也有客户给我们的摘要太长，超出了指定的区域；对于一些客户来说，他们甚至没有想过他们的短信可能太长。：-）

在您的情况下，我会做一些类似stackoverflow的事情：在输入区域下方显示一个框，显示他们在keyup上的文本更新。有了一个固定高度的框，当他们的文本太长时，他们会立刻意识到这一点。取而代之的是，你可以尝试以下方法：

<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属性，看看它是否比您预期的大，如果是，请将字体设置为小一点，然后重复，直到scrollHeight达到您预期的值。

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

相关文章：