0

我正在尝试具有与 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.

注意：我试图在保持文本省略号的同时实现这一点，所以如果我需要克隆该行，我会很好。

4

1 回答 1

2

我制作了一个 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 次迭代没有任何问题

于 2013-10-06T09:11:21.593 回答