Question

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

CSS：

 #wrapper {
    width: 800px;
 }

 h1 {
    width: 100%;
 }

HTML：

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

但问题是，从MySQL数据库中提取的标题字符串的长度变化很大。有时它可能是10个字符，有时可能是80个字符。可以建立一个min＆amp;最大字符数。

如果可能的话，我是如何让我的text-size <h1>$titleString</h1>动态放大/缩小，这样字符串只能在一行上最适合那个线长？我已经看到了很多关于调整div的问题 - 但在我的情况下，div必须始终为100％（800px）并且我想要最适合标题。

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

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

我唯一能想到的是一种强力方法，通过试验和错误，我建立了与CSS em大小相匹配的可接受的字符串字符数范围，但这在代码方面是一个相当丑陋的实现。

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

Answer 2

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

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

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

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

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

您还可以检查宽度是否太短，可能小于200px并相应地增加字体大小。

如果您对自己的文本大小合适感到满意，请将文本移到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>

我使用了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);
}
  });

即，反复将字体大小减小5％，直到总宽度小于或等于800px。

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

2 个答案: