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

Question

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

我相信你现在明白了。我对任何事情都持开放态度。Javascript，php，无论你提供什么。

Answer 1

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

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

代码没有正常工作，但是

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

ETC...

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 中执行此操作并且过大/布局会因某些用户而中断）。

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

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

计算被缓存，这使得它在处理多个文本或必须多次调整文本时非常快（例如，在调整窗口大小时，第二次调整大小几乎不会影响性能）。

演示与您的情况相似

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