Question

我带着一个棘手的问题来找你：

想象一下，你有以下基本结构：

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

现在假设div有display:block; and width:200px;。使用javascript，你会如何检查哪个字体大小给你一个尽可能大的'你好'而没有水平溢出（在一个单词的情况下）或者在一个句子或一组单词的情况下跳到第二行？

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

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

Answer 1

查看FitText

它也是github上的开源。

如果您对排版感兴趣，可能需要查看名为Lettering.js

的其他项目

Answer 2

可能有一种方法并不那么疯狂，但这应该尽可能准确。基本上，您有一个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();

Answer 3

又快又脏

fiddle

将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;
}

Answer 4

试试这个：

Auto-size dynamic text to fill fixed size container

(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>

Answer 5

new jsFiddle Demo （已更新 2013年3月22日）

我会不断增加字体大小，直到clientWidth或clientHeight发生变化。但是，当使用实际元素本身时，这变得不可靠。为了处理这种情况，可以动态创建跨度，然后监控跨度的尺寸，以便正确保留实际元素的原始尺寸。

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;
};

根据父容器检查文本元素的宽度（基于字体大小）

5 个答案:

又快又脏