Javascript 检查文本元素'；相对于其父容器的宽度（基于字体大小）

我想问你一个棘手的问题：

假设您具有以下基本结构：

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

你好

现在假设div有

display:block；宽度：200px。
使用javascript，您如何检查字体大小使“hello”尽可能大，而不会出现水平溢出（对于一个单词）或跳转到第二行（对于一个句子或一组单词）

我想不出一种方法来测量文本占用的空间，这样就可以对照父容器的空间进行检查，更不用说检查元素是否溢出或换行了

如果有办法的话，我相信这是一个合适的地方

它在github上也是开源的

如果您对排版感兴趣，您可能想查看他们的另一个名为
的项目，请尝试以下方法：


（函数（$）{
$.fn.textfill=函数（选项）{
var fontSize=options.maxFontPixels；
var ourText=$（'span:visible:first'，this）；
var maxHeight=$（this）.height（）；
var maxWidth=$（this）.width（）；
高度；
变量文本宽度；
做{
css（'font-size'，fontSize）；
textHeight=ourText.height（）；
textWidth=ourText.width（）；
fontSize=fontSize-1；
}而（（textHeight>maxHeight | | textWidth>maxWidth）&&fontSize>3）；
归还这个；
}
})（jQuery）；
$（文档）.ready（函数（）{
$（'.jtextfill'）.textfill（{maxFontPixels:36}）；
});
我的文本在这里
可能有一种方法没有那么疯狂，但应该尽可能精确。基本上，您有一个div，用于测量其宽度并递增文本内容，直到它超过目标div的宽度。然后，将目标div的
字体大小更改为测量div的-1：


var$measurer=$（“”）.css({
位置：'固定'，
排名前：“100%”
}).attr（'id'，'measurer'）；
$measurer.append（$（“”）.text（$（（“p”）.text（））；
$measurer.附录（“正文”）；
而（$measurer.width（）（2013年3月22日更新）

我会一直增加字体大小，直到clientWidth或clientHeight更改。但是，在使用实际元素本身时，这变得不可靠。要处理这种情况，可以动态创建一个跨度，然后监视跨度的尺寸，以便正确保留实际元素的原始尺寸

js

又快又脏

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

var dWidth=$（“div”）.width（）；
var pWidth=$（“p”）.width（）；
var启动=1；
while（pWidth
@AaronBlenkush-你点击按钮查看它的运行情况了吗？你使用的是什么平台。我点击了按钮，没有看到任何变化。我使用的是最新的Chrome普通版本（26.0.1410.33 beta-m版）@AaronBlenkush-很抱歉，您没有注意到字体的变化，您希望我发出警报来显示确切的变化吗？在不改变元素位置的情况下，只有轻微的变化，我相信在问题的限制下，它只有3px（平均从14px或1em到17px）。在强制/更改高度或宽度之前，修改高度以允许文本字体变大…不会产生任何结果result@Sotkra-这是因为我的设计接近读取高度和宽度的方式存在一个基本缺陷。不幸的是，宽度没有被正确识别，因为溢出允许它接近infinity（如在锁定中）。但是！我已经修复了此缺陷，现在有了一个相当酷的演示：。我将发布一个更新。这会将元素的高度从20px更改为54px，并更改行高。@TravisJ如何在不增加高度的情况下增加字体大小？字体大小只能增加这么多，才能影响高度（在本例中，由于段落元素的默认行高，我只发现了3倍的更改空间）。如果高度不是问题，字体大小可能会变得非常大，但它将开始偏移许多其他元素。让我们假设两种情况：a）高度不重要……但是当你有一个以上的单词，甚至一个段落时，跳行又如何呢？b）高度很重要……你如何使它只在高度允许的范围内增长？c） 对于段落应用程序而言，宽度不再是一个问题，而是高度，例如，您希望文本根据父级的高度调整自身大小，而不考虑width@Sotkra如果给
$measurer
一个设置的宽度，则可以对高度执行相同的测量。我的示例使用了两个单词，表明即使保持宽度，它也不会换行；这就是我的目标。我查看了他们的代码，但是他们到底做了什么来检查文本元素的宽度，以便与父元素的宽度进行比较？Jquery/js是否可以根据元素的字体大小来测量元素的宽度，就像测量固定宽度的显示块div或其他东西一样？此外，它是否可以在固定PX中测量（基于用户设置，基于%的值？）最后但并非最不重要的一点是，当容器具有基于%的值时，它是否工作？包含您可以传递给它的所有参数，以及如何使用这些参数以及它们如何执行：下面是实际执行主要工作的扩展部分。此部分被包装在函数调用中，该函数调用用于调整大小事件。他们还引入了一些奇特的参数变量，或者使用默认值。是否允许进行垂直极限检查？我不认为geekymonkey插件目前由于jquery的插件页面正在进行修改而被禁用。上面的代码是什么
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();

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

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