Question

基本上我希望根据文本的长度调整文本大小。如果我写了“WWWWWWWW”，它将被调整大小以适应100px div。如果我写“测试”它将不会调整大小，因为它不会打破100px限制。

我相信你现在明白了。我很开心。 Javascript，php，无论你提供什么。

Answer 1

如果您使用具有固定宽度的字体（即所有字母宽度相等），那么您可以使用php或javascript执行此操作。

使用strlen计算php中的字母数。然后硬编码字体大小，例如这个例子展示了它是如何完成的，并不是最好的方法。如果您有任何问题，请告诉我。

代码无法正常工作但是

if(strlen($text)>5){
  $fontsize = 11px;
}

等...

Answer 2

在PHP中执行类似的操作：

$length = strlen($string);

if($length < 5)
{
   $added_class = 'short';
}
elseif($length < 10)
{
   $added_class = 'medium';
}
else
{
   $added_class = 'long';
}

echo '<div class="normal_class '.$added_class.'">'.$string.'</div>';

在你的CSS文件中：

div.short { font-size: 15px }
div.medium { font-size: 13px }
div.long { font-size: 10px }

Answer 3

我认为javascript是你的朋友，因为它允许你最好地适应文本而不管用户的浏览器窗口大小（如果你在PHP中使用超大/布局将为某些用户打破）。

我遇到了类似的问题，这让我为此编写了自己的插件。一种解决方案是使用缩小到拟合方法，如here所述。但是，如果您必须适合多个项目或关注性能，例如，在调整窗口大小时，请查看jquery-quickfit。

它测量并计算文本的每个字母的大小不变量，以适合并使用它来计算下一个最适合文本的字体大小。

计算被缓存，这使得它在处理多个文本或不得不多次适合文本时非常快（在第二次调整大小时几乎没有性能损失），例如，在窗口调整大小时。

Demo for a similar situation as yours

项目页面上有更多文档，示例和源代码。

调整文本大小以适应静态div

3 个答案: