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

Question

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

想象一下,你有以下基本结构:

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

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

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

如果有办法,我相信这是一个正确的问题.

Answer 1

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