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

发布于 2024-11-10 02:49:53 字数 683 浏览 4 评论 0原文

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

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

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

不管怎样，我想让网站看起来漂亮是我的责任，所以我一直在努力寻找一种使文本适合固定大小的框的方法。一种方法是为框（通常是 div）提供此 css 属性：

overflow: auto;

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

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

在某些应用程序中（Powerpoint 就是一个例子），您可以为字体大小选择“最适合”选项，并且应用程序会选择允许文本完全适合的大小。我基本上是在寻找它的 CSS、JavaScript 或 PHP 版本。

提前致谢！

编辑：这是解决方案 - http://jsfiddle.net/Cnkfn/1/< /a>

原文

I'm coming up against a common problem with customised content management system design.

I run a small web design company and I often have to make a certain area of a website editable for the customer. For example, there may be a bar along the top of the page advertising the latest news or deals which the customer wants to be able to edit themselves.

The problem I'm having is that they often write too much and the text overflows. Maybe I'm being a bit too defensive, but in these situations I usually privately blame the customer - surely they check after updating the text, realise it doesn't fit, and modify it so that it does?

Anyway, I guess it's my responsibility to make the site look nice so I've been trying to find a way of making text fit in a fixed size box. One way is to give the box (usually a div) this css property:

overflow: auto;

but sometimes this isn't suitable, such as in the example described above where the bar is only one line high.

My question (yes I've finally got to it) is how can I make the font change size automatically so that it fits in the box?

In some applications (Powerpoint being one example), you can choose a "best fit" option for font size and the application chooses a size which allows the text to fit exactly. I'm basically looking for either a CSS, JavaScript or PHP version of this.

Thanks in advance!

EDIT: Here's the solution - http://jsfiddle.net/Cnkfn/1/

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

望她远 2024-11-17 02:49:53

我感受到你的痛苦！我们也有客户给我们提供的摘要对于分配的区域来说太长；对于一些客户来说，他们显然没有想到他们的文本可能太长。 :-)

在你的情况下我会做的事情类似于 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 的匿名函数中。我相信您可以修改它以适合您的实施。

I feel your pain! We also have clients who give us abstracts which are too long for the allotted area; for some clients, it apparently doesn't even cross their mind that their text might be too long. :-)

What I'd do in your case is something like what stackoverflow does: show a box below the input area that shows their text updating onkeyup. With a fixed-height box, it'll be immediately obvious to them when their text is too long. In lieu of that, you could try something like the following:

<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>

It checks to see if the inner div's height is greater than the outer div's; it works on the assumption that the inner div has no padding (you can tweak as necessary). It decreases the inner div's font-size by 1px till the inner div's height is no longer greater than the outer div's.

You could have code like this on the page that displays the client's text in which case you could just wrap it in an anonymous function that executes ondomready. I trust you can modify this to suit your implementation.

回复收藏 0 原文