通过JavaScript获取文本块的维度,而不是容器的`getBoundingClientRect`的大小

Question

我想获得容器内的文本大小.让我们考虑一下容器有填充和边框的一般情况.

问题是getBoundingClientRect返回文本PLUS左边框和填充的大小,以防文本溢出.否则它只返回容器边框的大小.

Answer 1

如果您使用所有相同的文本格式选项创建占位符 div 并找到它的宽度，则可以获得宽度。

例如，我将创建一个 div，其类.hidden与原始 div 具有相同的属性。

div.container
{
    font-size: 16px;
}

div.hidden
{
    font-size: 16px;
    display: none;
}

.container然后，使用 jQuery，复制to的内容.hidden并找到 的宽度.hidden：

$(function(){

    $("div.container").each(function(){
   
        $("body").append("<div class='hidden'>"+$(this).html()+"</div>");
        var width = $("div.hidden").width();
        $("div.width").html("Actual width: "+width+"px");
        $("div.hidden").remove();
    
    });

});

JSFiddle