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

Posted 2023-03-06

【中文标题】如何自动更改div内的文本大小？

【英文标题】：How to automatically change the text size inside a div?

【发布时间】：2011-09-01 01:02:54

【问题描述】：

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

【问题讨论】：

你能解释一下“自动修复”是什么意思吗

您是否在询问如何调整文本大小以适合您的 DIV 大小？

【参考方案1】：

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

这是一个带有 jQ​​uery 实现的示例：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" );
    
);

【讨论】：

如果你添加这个while( $('#fitin').height() > $('#fitin div').height() ) $('#fitin div').css('font-size', (parseInt($('#fitin div').css('font-size')) + 1) + "px" ); 那么你也可以增加字体大小

@Web_Designer 太棒了。但是，如果我在重新调整大小后刷新窗口，则文本不会有小字体。有没有其他选择？谢谢

【参考方案2】：

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

一个实现FlowType的例子：

设置你的风格

body 
font-size: 18px;
line-height: 26px;

Download FlowType from GitHub 并在你的 head 元素中包含对它的引用

flowtype.jQuery.js

调用流类型

$('body').flowtype();

（可选）更新默认设置

$('body').flowtype(
minimum   : 500,
maximum   : 1200,
minFont   : 12,
maxFont   : 40,
fontRatio : 30,
lineRatio : 1.45
);

查看their homepage 以获取交互式演示

【参考方案3】：

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

客户端

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

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

position: absolute;
top: 0;
left: 0;
width: auto;
height: auto;
display: block;
visibility: hidden;
font-family: /* as per your original DIV */
font-size: /* as per your original DIV */
white-space: /* as per your original DIV */

将文本复制到其中

检查 DIV 的宽度是否超​​过了原始 DIV 的大小。

调整font-size 值的方法不是简单地增加/减少，而是计算不可见DIV 和原始DIV 之间的宽度差。这将更快地偏离校正尺寸。

转到步骤3。

服务器端

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

【参考方案4】：

问题已经回答很久了，但我想补充一些说明。

从那以后，一个额外的 jQuery 插件被添加到了 Universe：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();

【参考方案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);
);

【参考方案6】：

这里是一个全局函数，带有 JQuery 和 HTML5 数据注释来定义块大小看看：

不要问我为什么需要表格 :-)，宽度函数最适用于表格...在 Jquery 1.7 上 .. 没有为 Divs 获得宽度

用法：

<table>
 <tr>
    <td class="caa" data-text-max- data-text-max->
       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");
    );

);

【参考方案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');  
);

【参考方案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");
            
        );






    );
);

【参考方案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");
        
    );