文本调整大小不适用于div

时间:2015-02-20 06:59:52

标签: javascript jquery html css html5

这是动态调整文本大小的my code

现在文本在span中,但我希望像那样

在div中
<div id="h2"  class='jtextfill2' >

</div >

但是当我将h2更改为div时,我的代码无效。 id传递给代码

$('.jtextfill2').textfill({ maxFontPixels: 36 },'h2');

但我想知道它为什么不起作用?

4 个答案:

答案 0 :(得分:0)

将span更改为div时它不起作用的原因是header元素用于表示其最近的祖先切片内容或切片根元素的介绍性内容

另一方面,div不是分段元素,所以理想情况下在标题内使用div是不正确的。 请参阅文档以获取更多详细信息: 'http://www.w3.org/TR/html5/sections.html#the-header-element'

答案 1 :(得分:0)

您可以提取的一个技巧是将<div>与设置为height的{​​{1}}的实际高度与设置为最大高度时的高度(在您的情况下为150px)进行比较:

示例:

auto

工作jsFiddle


作为旁注:在jsFiddle中,您可以为Javascript使用单独的框,无需使用$.fn.textfill = function (options, targetid) { var target = $("#" + targetid); var fontSize = options.maxFontPixels; var maxHeight = target.height(); var maxWidth = target.width(); var neededSize, actualSize; var neededHeight; do { target.css('font-size', fontSize); // See what would be the height of the container, at // a given font size, if we'd give it any space it needs. target.css('height', 'auto'); neededHeight = target.height(); fontSize = fontSize - 1; // Condition: needed height is larger then the max height. } while (neededHeight > maxHeight && (fontSize > 3)); // Restore original height. target.css('height', maxHeight); return this; } 标记。

答案 2 :(得分:0)

为什么不使用jQuery提供的.css

$('.jtextfill2').css('font-size', '36px');

jsFiddle

答案 3 :(得分:0)

        (function($) {
            //  alert("f");
            $.fn.textfill = function(options,targetid) {
                var fontSize = options.maxFontPixels;
                var maxHeight = $("#"+targetid).height();
                var maxWidth = $("#"+targetid).width();
                var textHeight;
                var textWidth;
                var text = $("#"+targetid).text();


                do {
                    $("#"+targetid).css('font-size', fontSize);
                    $("#"+targetid).append("<span class='texthight'>"+text+"</span>"); 
                    textHeight = $('.texthight').height();
                    $('.texthight').remove();
                    textWidth = $("#"+targetid).width();
                    fontSize = fontSize - 1;
                } while ((textHeight > maxHeight || textWidth > maxWidth) && (fontSize > 3));
                return this;
            }
        })(jQuery);

        $('.jtextfill2').textfill({ maxFontPixels: 50 },'h2');

<!-- //-----------------HTml--------------------//    --> 
<h2 id="h2"  class='jtextfill2' >
      aaSamp sfd sdfsf sfsddffds ss ssf fsdf sdf sfs fsdfs sdfsdf sdf sdf 
</h2>