这是动态调整文本大小的my code。
现在文本在span中,但我希望像那样
<div id="h2" class='jtextfill2' >
</div >
但是当我将h2更改为div时,我的代码无效。 id传递给代码
$('.jtextfill2').textfill({ maxFontPixels: 36 },'h2');
但我想知道它为什么不起作用?
答案 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)
答案 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>