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

Question

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

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

Answer 1

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

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

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

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

然后，使用jQuery，将.container的内容复制到.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

Answer 2

有趣！您可以使用javascript来克隆具有0填充/边距/边框的屏幕外空元素内的文本。然后你可以得到那个元素的宽度。

var txt = document.getElementById('fixed').innerHTML,
    clone = document.getElementById('clone');

clone.innerHTML = txt;

var width = clone.offsetWidth;

document.getElementById('output').innerHTML = width;

#fixed {
    width: 8em;
    height: 8em;
    border: .5em solid red;
}

#clone { 
  margin: 0;
  padding: 0;
  border: 0;
  position: fixed;
  left: -9999px;
}

<div id="fixed">asdfkjahsdflkahjsdflkjhasdljfhalsdkjfhalsdkjfhalsdkjfhalksdhjflasd</div>
<div id="clone"></div>

Width of text: <span id="output"></span>

Answer 3

在这里回答的人带来了一个绝妙的想法，即将文本包装成<div>零margin，border和padding;

我刚才进一步发展了这个想法。我将div放在容器中，使文本与没有包装器时的样式完全相同。

JsFiddle

此解决方案几乎可以在任何地方使用。它可以通过非常鼓励的CSS编写方式来打破，比如

.container div b {
    padding: 5px;       /* firing only when test is run */
}

如果您不在这样的项目中编写CSS代码，那么您很幸运能够使用我的代码段吗？