获取父级的文本内容宽度，隐藏溢出

Question

我正在尝试具有与Excel相似的功能，双击该列调整大小并将特定的列扩展到该列中内容的最大宽度。

问题：我不知道如何在div内获得文本内容宽度，其中隐藏了隐藏的溢出和文本溢出的省略号。 我不确定要应用此功能需要哪些技巧。 我从来没有尝试过这样的事情。

当前的HTML标记：

<div style="width: @manuallySetWidthInPx">text</div>

当前的CSS：

position: relative;
min-width: 50px;
float: left;
padding: 5px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;

我如何需要重构<div />和CSS以获取内部文本内容的实际宽度？
我可以使用jQuery 。

注意：我正在尝试在保留文本省略号的同时实现这一点，因此，如果需要克隆该行，我会很满意。

Answer 1

我制作一个DIV并使用以下CSS将其放在屏幕外

#two{
    width: auto !important;
    top: -100px;
}

的HTML

<div id = "one">
    gibbfasdfsdfasdfasdfasdfasdfASDadsAS
</div>

<div id = "two">


</div>

然后使用以下JavaScript将显示的DIV的文本传输到隐藏的DIV，并获取隐藏的DIV的宽度。

$(document).on("click", "#one", function(){
    var value = $("#one").text();
    $("#two").text(value);
    var div_width = $("#two").width();
    alert(div_width);
});

在这里摆弄

根据您使用上述JavaScript代码的上下文，可能会出现一些性能问题。 我看不到运行200次迭代的循环有任何问题