2

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

CSS：

 #wrapper {
    width: 800px;
 }

 h1 {
    width: 100%;
 }

HTML：

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

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

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

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

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

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

4

2 回答 2

2

我在 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>');
于 2012-02-08T17:27:32.727 回答
1

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

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

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

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

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

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

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

这个问题描述了计算文本宽度。

例如，我使用 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。

于 2010-03-12T02:50:51.343 回答