在隐藏溢出的父项中获取文本内容宽度

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

小提琴here

根据您使用上述 JavaScript 代码的上下文，可能存在一些性能问题。不过，我认为运行循环 200 次迭代没有任何问题