根据父容器检查文本元素的宽度(基于font-size)

Checking a text element's width (based on font-size) against its parent container

本文关键字：基于 font-size 元素 文本 检查      更新时间：2023-09-26

我有一个棘手的问题来找你:

假设您有以下基本结构:

<div><p>hello</p></div>

现在假设div有display:block; and width:200px;。使用javascript，你如何检查什么字体大小给你一个"你好"尽可能大，没有水平溢出(在一个单词的情况下)或跳到第二行在一个句子或一组单词的情况下?

我想不出一种方法来测量文本占用的空间，以便与父容器的空间进行检查，更不用说检查元素是否溢出或跳行了。

如果有办法，我相信这是正确的地方问。

看一下FitText

在github上也是开源的。

如果你对排版感兴趣，你可能想看看他们的另一个项目，叫做letters .js

可能有一种方法不那么疯狂，但它应该尽可能精确。基本上，你有一个div，你用它来测量它的宽度，并逐渐增加文本内容，直到它超过目标div的宽度。然后，改变目标div的<p>的字体大小为测量div的- 1:

http://jsfiddle.net/ExplosionPIlls/VUfAw/

var $measurer = $("<div>").css({
    position: 'fixed',
    top: '100%'
}).attr('id', 'measurer');
$measurer.append($("<p>").text($("p").text()));
$measurer.appendTo("body");
while ($measurer.width() <= $("#content").width()) {
    $("#measurer p").css('font-size', '+=1px');
    console.log($("#measurer").width());
}
$("#measurer p").css('font-size', '-=1px');
$("#content p").css('font-size', $("#measurer p").css('font-size'));
$measurer.remove();

又快又脏

小提琴

设置p的样式为display: inline，然后运行

var dWidth = $("div").width();
var pWidth = $("p").width();
var starting = 1;
while (pWidth < dWidth) {
    $("p").css("font-size",starting+"em");
    pWidth = $("p").width();
    starting = starting + .1;
}

试试这个:

自动调整动态文本大小以填充固定大小的容器

(function($) {
    $.fn.textfill = function(options) {
        var fontSize = options.maxFontPixels;
        var ourText = $('span:visible:first', this);
        var maxHeight = $(this).height();
        var maxWidth = $(this).width();
        var textHeight;
        var textWidth;
        do {
            ourText.css('font-size', fontSize);
            textHeight = ourText.height();
            textWidth = ourText.width();
            fontSize = fontSize - 1;
        } while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3);
        return this;
    }
})(jQuery);
$(document).ready(function() {
    $('.jtextfill').textfill({ maxFontPixels: 36 });
});
<div class='jtextfill' style='width:100px;height:50px;'>
    <span>My Text Here</span>
</div>

新jsFiddle演示 (更新3/22/13)

我会一直增加字体大小，直到clientWidth或clienttheight改变。然而，当使用实际元素本身时，这就变得不可靠了。为了处理这种情况，可以动态地创建一个span，然后监视span的尺寸，以便适当地保留实际元素的原始大小。

js 

var adjuster = document.getElementById("adjust");
adjuster.onclick = function(){
 var p = document.getElementById("p");
 var text = p.innerText;
 var s = document.createElement("span");
 s.innerText = text;
 p.innerHTML = "";
 p.appendChild(s);
 var h = p.clientHeight;
 var w = p.clientWidth;
 var size = 10;
 while(true){
  size++;
  s.style.fontSize = size + "px";
  if($(s).height() > h || $(s).width() > w){
   size-=2;//rollback to no height change
   s.style.fontSize = size + "px";
   break;
  }
 }
 p.style.fontSize = s.style.fontSize;
 p.removeChild(s);
 p.innerText = text;
};
相关文章：