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

假设您有一个简单的固定宽度布局，可以从MySQL数据库中获取title。固定宽度div，根据长度动态调整文本的大小

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尺寸匹配，但这是从代码端的一个非常丑陋的实现。

来源

2010-03-12 Drew

我不能给你一个很好的答案-except也许在伪代码中，但我会注意到两件事：1，你不能/不应该做这个服务器端，你应该使用JavaScript /客户端;和2：你确定这个想法是一个很好的设计 - 精神？品牌化通常依赖于一致性，这个想法似乎完全忽略了。 – 2010-03-12 01:43:54

@ ricebowl 1）同意，但我需要帮助，因为我不知道任何Java的风格。 2）好点，但不适用。我正在使用文章标题，并希望巧妙地调整文本大小以避免可怕的*一个字留在第二行*看起来很糟糕。如果没有一个好的解决方案，我只需要把它吸起来，找出最长的字符串的大小，并只使用它。 – Drew 2010-03-12 01:48:26

我同意ricebowl在一致性方面的事情，但在我自己的项目中有本能，我希望这样的事情能够体现出来。无论我如何切割它，当我认为完成时，它从未如此。最大限制是一个好主意，直到16个字符的大写“W”字符串变成或使用了像MOOMWOOD02或IllI1这样的名称。我想你已经抛出了设计一个可能的包装的想法，所以我不会去那里。我很想看看这个问题会发生在哪里。 – 2010-03-12 01:51:45

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

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

Initailly文本被放置成与没有样式的跨度从字体大小施加开。

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

我用了一个跨度，因为它调整了文本的宽度而不是容器的宽度。和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％，直到总宽度小于或等于800像素减小字体大小。

来源

2010-03-12 02:50:51

感谢这个伟大的详细例子，我应该能够得到它的工作！ :-) – Drew 2010-03-13 23:16:34

我有一些运气在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-08 17:27:32

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

回答

相关问题