Question

我有一个带有一些文字的div：

<div style="white-space:nowrap;overflow:none;width:50px;">
  With some text in it
</div>

如何缩放文本的字体大小以使所有文本都可见？

Answer 1

相反，明智的。您可以将文本包装在内部DIV中，使用JavaScript测量其宽度。测试该宽度是否比父DIV宽。获取当前字体大小，并逐步向下移动1px，直到内部DIV的宽度小于或等于外部DIV的宽度。

Answer 2

我一直在做这样的事情，设置相对于父（或窗口）宽度/高度的文本比例。您可以使用offsetWidth和offsetHeight而不是width来避免使用jQuery。

var setBodyScale = function () {

    var scaleSource = $(window).width(), // could be any div
        scaleFactor = 0.055,
        maxScale = 500,
        minScale = 75; //Tweak these values to taste

    var fontSize = (scaleSource * scaleFactor) - 8; //Multiply the width of the body by the scaling factor:

    if (fontSize > maxScale) fontSize = maxScale;
    if (fontSize < minScale) fontSize = minScale; //Enforce the minimum and maximums

    $('html').css('font-size', fontSize + '%'); // or em
}

Answer 3

在寻找相同内容的过程中遇到了这个JQuery插件。

Github

Demo

Answer 4

当我在寻找同样的东西时，也遇到了这个Jquery脚本。据我所知，它具有额外的好处，就是也可以调整高度以及宽度。

来自这里：http://www.metaltoad.com/blog/resizing-text-fit-container

 function adjustHeights(elem) {
      var fontstep = 2;
      if ($(elem).height()>$(elem).parent().height() || $(elem).width()>$(elem).parent().width()) {
        $(elem).css('font-size',(($(elem).css('font-size').substr(0,2)-fontstep)) + 'px').css('line-height',(($(elem).css('font-size').substr(0,2))) + 'px');
        adjustHeights(elem);
      }
    }

Answer 5

简答：你没有。

你必须尝试一个尺寸，渲染它，看它是否适合，尝试另一个尺寸，渲染它是否适合等等。然后你必须处理计算出的字体尺寸如此小的情况没有人可以阅读文字。

还有其他选项，如果文本不合适，在文本末尾添加省略号（...），当鼠标悬停在它上面时，div可以展开，你可以使用弹出窗口或工具提示使用全文，或将全文放在屏幕的更大区域。

找另一种方式。

如何自动缩放字体大小以适合div的内容？

5 个答案: