gpt4 book ai didi

javascript - 计算文本字体大小以用文本填充容器

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:04:28 24 4
gpt4 key购买 nike

<分区>

Possible Duplicate:
Auto-size dynamic text to fill fixed size container

如果容器只包含一个没有子元素的纯文本,那么下面的代码是一个可行的解决方案:

(function($) { 
$.fn.textfill = function(options) {
return this.each(function() {
var text = $(this).text();
$(this).text('');
var container = $('<span />').text(text).appendTo($(this));
var min = 1, max = 200, fontSize;
do {
fontSize = (max + min) / 2;
container.css('fontSize', fontSize);
var multiplier = $(this).height()/container.height();
if (multiplier == 1) { min = max = fontSize}
if (multiplier > 1) { min = fontSize}
if (multiplier < 1) { max = fontSize}
} while ((max - min) > 1);
fontSize = min;
if ($(this).width() < container.width()) {
min = 1;
do {
fontSize = (max + min) / 2;
container.css('fontSize', fontSize);
var multiplier = $(this).width()/container.width();
if (multiplier == 1) { min = max = fontSize}
if (multiplier > 1) { min = fontSize}
if (multiplier < 1) { max = fontSize}
} while ((max - min) > 1);
fontSize = min;
}
container.remove();
$(this).text(text);
var minFontSize = options.minFontPixels;
var maxFontSize = options.maxFontPixels;
$(this).css('fontSize',
minFontSize && (minFontSize > fontSize) ?
minFontSize :
maxFontSize && (maxFontSize < fontSize) ?
maxFontSize :
fontSize);
});
};
})(jQuery);

查看演示 here .

但是如果容器包含子元素呢?假设:

<div><span class="c1">text1</span>main text<span class="c2">text2</span></div>

我们还想自动调整 child 的大小,使文本与作为文本节点的“主文本”保持相同的高度? child 可能有不同的font-family 或其他参数。

如何改进上述算法才能得到这样的结果?

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com