如何自动更改div内的文本大小？

Question

我有一个带有 div 的背景图像。我想写一些文本，但是这个文本应该通过div改变字体大小。

Answer 1

我这样理解你的问题，你想将一些文本放入具有固定尺寸的给定 div 中，如果 div 太小而无法显示所有文本，则应缩小字体大小，直到文本适合 div 。如果这就是重点，这就是我的解决方案。

下面是一个 jQuery 实现的示例： http://jsfiddle.net/MYSVL/2/

这里 div

<div id="fitin">
    <div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</div>

是一个具有固定大小的

#fitin {
    width: 300px;
    height: 100px;
    border: 1px solid black;
    overflow: hidden;
    font-size: 1em;
}

这个 JavaScript 可以完成这项工作。

$(function() {
    while( $('#fitin div').height() > $('#fitin').height() ) {
        $('#fitin div').css('font-size', (parseInt($('#fitin div').css('font-size')) - 1) + "px" );
    }
});

Answer 2

FlowType.js 将会做到这一点：调整字体大小以匹配边界元素，无论是 div 还是其他元素类型。

实现 FlowType 的示例：

1. 设置您的样式

   <前><代码>正文{
   字体大小：18px；
   行高：26px；
   }

2. 从 GitHub 下载 FlowType 并将其引用包含在你的头部元素

   flowtype.jQuery.js
   

3. Call流类型

   $('body').flowtype();
   

4. （可选）更新默认设置

   $('body').flowtype({
   最低：500，
   最大：1200，
   最小字体：12，
   最大字体：40，
   字体比例：30，
   线比：1.45
   });
   

查看他们的主页以获取交互式演示

Answer 3

我不完全确定我理解你的问题，但我认为你要问的是如何将文本放入预定义大小的特定容器中。我将尝试回答这个问题。

客户端

当您想在客户端按需执行此操作时，您必须运行 Javascript。这个想法是：

1. 生成一个不可见的div并将其样式设置为：

   位置：绝对；
   顶部：0；
   左：0；
   宽度：自动；
   高度：自动；
   显示：块；
   可见性：隐藏；
   font-family: /* 根据你原来的 DIV */
   font-size: /* 根据你原来的 DIV */
   空白： /* 根据您的原始 DIV */
   

2. 将文本复制到其中

3. 检查DIV的宽度是否超​​出原始 DIV 的大小。

4. 调整font-size值不是简单地增加/减少，而是通过计算不可见和原始DIV之间的宽度差异。这将更快地偏离正确的大小。

5. 转到步骤3。

服务器端

没有可靠的方法在服务器上设置字体大小，以使其适合客户端渲染的容器。不幸的是，您只能根据预先测试的经验数据来估算大小。

Answer 4

这个问题已经回答很久了，但我想添加一些注释。

从那时起，一个额外的 jQuery 插件被添加到宇宙中： FlowType.js

https://github.com/simplefocus /FlowType.JS

我尝试了给定的解决方案和插件（包括 FlowType.JS），最后我编写了自己的解决方案和插件。我只是想将其作为“灵感”包含在这里。我使用不同的方法：我计算文本大小大于其父级的比率。我不知道这是否有意义，但对我来说效果很好。

    /* shrinkText jQuery Plugin  */

(function( $ ){

  $.fn.shrinkText = function() {

    var $_me = this;
    var $_parent = $_me.parent();

    var int_my_width = $_me.width();
    var int_parent_width = $_parent.width();

    if ( int_my_width > int_parent_width ){

      rl_ratio =   int_parent_width / int_my_width;

      var int_my_fontSize = $_me.css("font-size").replace(/[^-\d\.]/g, '');

      int_my_fontSize = Math.floor(int_my_fontSize * rl_ratio);

      $_me.css("font-size", int_my_fontSize + "px");

    }
  };

})( jQuery );

它假设块级元素中有一个内联元素，它通过重新计算字体大小来缩小内联元素。

HTML：

<h1 style="white-space:nowrap;">
  <a href="#" >Macrobenthos of the North Sea - Miscellaneous worms</a>
</h1>

JavaScript：

if( jQuery().shrinkText ){
    $("#title a").shrinkText();
}

Answer 5

您必须预加载图像才能获取图像的宽度和高度。

一旦获得尺寸，您就可以“尝试”不同的字体大小：

$("<img/>").appendTo(document.body).attr('src','myBackground.png').load(function(){
    var width = $(this).width(), height = $(this).height(),
        $div = $("#myDivId"),
        font = 30;

    do{
      font--;
      $div.css('font-size',font);
    }while($div.width()>width || $div.height()>height || font == 0);

    $div.width(width);
    $div.height(height);
});

Answer 6

这是一个带有 JQuery 和 HTML5 数据注释的全局函数，用于定义块大小，请看一下：

不要问我为什么需要表格:-)，宽度函数在 Jquery 1.7 上最适合表格... Divs 无宽度

用法：

<table>
 <tr>
    <td class="caa" data-text-max-width="500" data-text-max-height="80">
       The Text is Here
    </td>
 </tr>
</table>

添加功能：

$(function () {
    var textConsts = {
        MIN_SIZE_OF_A_TEXT: 9
    };

    $('*[data-text-max-width]').each(function () {

        var textMaxWidth = $(this).data("text-max-width");
        var textMaxHeight = $(this).data("text-max-height");
        var minSizeOfaText = $(this).data("text-min-size");

        $(this).css('font-size', '9em');

        if (minSizeOfaText == null || !($(this).hasData("text-min-size")))
            minSizeOfaText = textConsts.MIN_SIZE_OF_A_TEXT;

        if (textMaxWidth == null || !($(this).hasData("text-max-width")))
            textMaxWidth = $(this).parent().width();

        if (textMaxHeight == null || !($(this).hasData("text-max-height")))
            textMaxHeight = $(this).parent().height();

        var curentWidth = $(this).width();
        var curentFontSize = 0;
        var numberOfRounds = 0;
        var currentHeigth = $(this).height();
        curentFontSize = parseInt($(this).css('font-size'));
        var lineHeigth = parseInt($(this).css('line-height'));
        if (currentHeigth > (curentFontSize * lineHeigth)) {
            curentWidth += curentFontSize * lineHeigth;
        }

        while (curentWidth > textMaxWidth || currentHeigth > textMaxHeight) {

            curentFontSize = parseInt($(this).css('font-size'));
            curentFontSize -= 1;

            $(this).css('font-size', curentFontSize + "px");

            curentWidth = $(this).width();
            currentHeigth = $(this).height();

            if (currentHeigth > (curentFontSize * 1.5))
                curentWidth += curentFontSize * 1.5;

            numberOfRounds += 1;

            if (numberOfRounds > 1000)
                break;

            if (curentFontSize <= minSizeOfaText)
                break;
        }

        $(this).css('height', textMaxHeight + "px");
        $(this).css('width', textMaxWidth + "px");
    });

});

Answer 7

当你在 div 中有一个复杂的 HTML 并且你想保持不同元素之间的比例时，我扩展了 DanielB 解决方案：

$(function() {
    $(window).on('resize', function() {
        $('#fitin').css('font-size', '1em');
        var count = 0;
        while( count< 30 && $('#fitin').height() > $('#fitin div').height() ) { 
            $('#fitin *').each(function( index ) {
                $(this).css('font-size',(parseInt($(this).css('font-size')) + 1) + "px");
            });
            count++;
        } 
        count = 0;
        while( count< 30 && $('#fitin div').height() > $('#fitin').height()-20 ) {
            $('#fitin *').each(function( index ) {
                $(this).css('font-size',(parseInt($(this).css('font-size')) - 1) + "px");
            })
            count++;
        }
    });
    $(window).trigger('resize');  
});

Answer 8

我已经制作了更好版本的 @DanielB 代码，也许它可以节省某人的时间:)

（只需将 RESIZABLE 类添加到您想要更改的 div 中）

$(document).ready(function() {
    $(window).resize(function() {

        $('.RESIZABLE').each(function(i, obj) {
            $(this).css('font-size', '8em');

            while ($(this).width() > $(this).parent().width()) {
                $(this).css('font-size', (parseInt($(this).css('font-size')) - 1) + "px");
            }
        });






    });
});

Answer 9

在这里查看这个示例 http://codepen.io/LukeXF/pen/yOQWNb，您可以在页面加载和页面调整大小上使用一个简单的函数来实现奇迹。

function resize() {  
    $('.resize').each(function(i, obj) {
        $(this).css('font-size', '8em');

        while ($(this).width() > $(this).parent().width()) {
            $(this).css('font-size', (parseInt($(this).css('font-size')) - 1) + "px");
        }
    });
}