0

Excelが列のサイズ変更をダブルクリックし、特定の列をその列のコンテンツの最大幅に拡張するのと同様の機能を持たせようとしています。

問題: div 内のテキスト コンテンツの幅を、overflow hidden および text-overflow 省略記号で取得する方法がわかりません。そして、これを機能させるためにどのようなトリックを適用する必要があるのか​​ わかりません。私はこのようなことを試したことはありません。

現在の 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 に答える