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

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

标题

CSS:

HTML:


$titleString

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

如果可能的话，我如何获得我的
$titleString
的
文本大小
，以便动态放大/缩小字符串，从而使字符串仅在一行上，并且最适合该行长度？我已经看到了很多关于调整div大小的问题，但是在我的例子中，div必须始终是100%（800px），并且我希望最适合标题

显然，必须设置最大
文本大小
值，以避免5个字符串变得庞大

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

我能想到的唯一一件事是一种蛮力方法，通过反复试验，我可以建立与CSS
em
大小匹配的可接受的字符串计数范围，但是从代码的角度来看，这是一个相当丑陋的实现。
也许一个解决方案是使用javascript以某种标准字体大小计算给定文本的宽度，然后调整大小，直到获得合理的宽度。在Javascript中，您可以这样计算文本的宽度：

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

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

最初，文本放置在一个跨度中，除了字体大小之外，没有应用任何样式

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

也就是说，反复将字体大小减少5%，直到总宽度小于或等于800px。
我在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>');

$title=$row->title；
$title_length=strlen（$title）；
如果（$title_length>30）
$title\u size=1.65*（30/$title\u长度）；
其他$title_size=1.65；
印刷品（“.$title.”）；
我不能给你一个好的答案——也许在psuedo代码中除外——但我要指出两件事：1，你不能/不应该在服务器端这样做，你应该使用JavaScript/客户端；第二：你确定这个想法是一个好的设计理念吗？品牌通常依赖于一致性，而这个想法似乎完全忽视了一致性。@ricebowl 1）同意，但我需要帮助，因为我不知道Java的任何风格。2）一个好的观点，但不适用。我正在处理文章标题，希望巧妙地调整文本大小，以避免在第二行留下可怕的一个单词，这看起来很糟糕。如果没有好的解决方案，我只需要接受它，找出最长字符串的大小，然后只使用它。我同意ricebowl关于一致性的观点，但在我自己的项目中，我已经有了一些机构，我希望这样的东西能够显化。无论我如何切片，当我认为它已经完成时，它从来都不是。在出现大写字母“W”的16个字符字符串或使用MOOMWOOD02或IllI1等名称之前，最大限制一直是个好主意。我想你已经放弃了设计一个可能的包装的想法，所以我不打算去那里。我很想知道这个问题的答案。我曾在一个非常大的娱乐网站工作过几年，在那里我们经常遇到乐队的名字。当硬宽度容器以一种丑陋的方式破坏线条时，艺术团队和终身编辑总是同意使用好的老式BR insert；）感谢您提供了非常详细的示例，我应该能够让它正常工作！：-）
<span id="mytitle" style="font-size:14pt;">
    A very long title that may be more than 800px in width. And even longer.
</span>

 $(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);
}
  });

$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>');