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次迭代循环的任何问题

在父级中获取文本内容宽度并隐藏溢出

1 个答案: