固定宽度 div，根据长度动态调整文本大小答案

【问题标题】：fixed width div, resizing text on the fly based on length固定宽度 div，根据长度动态调整文本大小
【发布时间】：2011-01-26 15:48:38
【问题描述】：

假设您有一个简单的固定宽度布局，可以从 MySQL 数据库中提取 title。

CSS：

 #wrapper {
    width: 800px;
 }

 h1 {
    width: 100%;
 }

HTML：

 <html>
  <body>
   <div id="wrapper">
    <h1> $titleString </h1>
   </div>
  </body>
 </html>

但问题是，从 MySQL 数据库中提取的标题字符串的长度变化很大。有时可能是 10 个字符，有时可能是 80 个字符。可以确定最小和最大字符数。

如果可能的话，我如何让我的<h1>$titleString</h1> 的text-size 即时放大/缩小，以使字符串只在一行上并且最适合该行的长度？我已经看到很多关于调整 div 大小的问题 - 但在我的情况下，div 必须始终为 100% (800px)，我希望最适合标题。

显然，必须设置最大 text-size 值，这样 5 个字符串才不会变得庞大。

有人有建议吗？我目前在这个页面上只使用 PHP/MySQL/CSS，但是如果这意味着我可以解决问题，那么结合另一种语言就可以了。

我唯一能想到的是一种蛮力方法，通过反复试验，我建立了与 CSS em 大小匹配的可接受的字符串字符计数范围，但从代码方面来看，这将是一个非常丑陋的实现。

【问题讨论】：

我不能给你一个好的答案——除了伪代码——但我会注意两点：1，你不能/不应该在服务器端做这个，你应该使用 JavaScript/客户端；和 2：你确定这个想法是一个好的设计理念吗？品牌塑造通常依赖于一致性，这个想法似乎完全忽视了这一点。
@ricebowl 1) 同意，但我需要帮助，因为我不知道任何 Java 风格 || 2) 好点，但不适用。我正在处理文章标题，并希望巧妙地调整文本大小以避免可怕的一个单词留在第二行，这看起来很糟糕。如果没有好的解决方案，我只需要把它吸起来，找到最长的字符串适合的尺寸并只使用它。
我同意 ricebowl 关于一致性的观点，但在我自己的项目中我有本能，我希望这样的事情得到体现。不管我怎么切它，当我认为它已经完成时，它从来没有。在出现 16 个大写“W”字符串或使用 MOOMWOOD02 或 IllI1 之类的名称之前，最大限制是一个好主意。我猜你已经放弃了设计可能的包装的想法，所以我不会去那里。我很想知道这个问题会去哪里。
我在一个非常大的娱乐网站工作了几年，在那里我们经常遇到乐队名称。当硬宽度容器以一种丑陋的方式断线时，艺术团队和非常资深的编辑总是同意老式的 BR 插入；）

标签： php mysql html css text-size

【解决方案1】：

我在 php 中使用了一种非常简单的方法。需要一些数字来匹配您的应用程序：我有一个标题空间，可以容纳大约 30 个字符，字体大小为 1.65em，所以我按比例制作了更长的标题和更小的字体大小，如下所示：

$title = $row->title;
$title_length = strlen($title);
if ($title_length > 30)
    $title_size = 1.65 * (30 / $title_length);
else $title_size = 1.65;

print('<span style="font-size: '.$title_size.'em;display: inline;">'. $title.'</span>');

【讨论】：

【解决方案2】：

也许一种解决方案是使用 javascript 以某种标准字体大小计算给定文本的宽度，然后调整大小直到获得合理的宽度。在 Javascript 中，您可以像这样计算文本的宽度：

 var title = document.getElementById("title");
 var width = title.offsetWidth;

最初，文本被放置在一个 span 中，除了 font-size 之外没有应用任何样式。

 <span id="title">The Title</span>

然后您可以检查文本的宽度是否大于 800px 并减小 font-size 直到宽度小于或等于。重要的是标题跨度最初没有应用其他样式，否则结果将是错误的。

您也可以检查宽度是否太短，可能小于200px，并相应地增加font-size。

一旦您对文本大小感到满意，然后将文本移动到 h1 中并设置字体大小。

This question 描述了计算文本宽度。

例如，我使用 jQuery 快速编写了这个。假设你的 HTML 是这样的：

<span id="mytitle" style="font-size:14pt;">
    A very long title that may be more than 800px in width. And even longer.
</span>

我使用了跨度，因为它会根据文本而不是容器的宽度调整大小。以及 jQuery 代码：

 $(document).ready(function(){        
    var w = $("#mytitle").width();
    while(w > 800){
       var currentFontSize = $('#mytitle').css('font-size');
       var currentFontSizeNum = parseFloat(currentFontSize, 10);
       var newFontSize = currentFontSizeNum*0.95;
       $('#mytitle').css('font-size', newFontSize);
       w = $("#mytitle").width();
   //alert("Width:" + w);
}
  });

即反复减小font-size 5%，直到总宽度小于等于800px。

【讨论】：

感谢您提供详细的示例，我应该能够让它工作！ :-)