javascript - td内のテキストをオーバーラップするスパンを作成するには?

Question

ユーザーがスパン上にマウスをlong text置くと、スパンが拡張され、サイズがtd変更されます。この変化を防ぎたい。td内スパンがどれだけ長くても同じサイズにしたい。出来ますか？

score 4 · Accepted Answer

td の幅を大きくすることはできますが、ラベルの長さに関して限られたオプションしか与えられませんが、別のより安全な解決策は、ここで見られるように、既存のスパンに対して絶対的にスパンを配置することです: http:// jsfiddle.net/9nvGM/6/

HTML:

<span class="label"><span class="long label">long long long text</span>long text</span>

CSS:

.label{
    position:relative;
}
.long{
    position:absolute;
    left:0px;
    top:0px;
    display:none;
}

JS:

handlerIn = function(e) {
  span.find(".long").show(); 
}
handlerOut = function(e) {
  span.find(".long").hide();   
}

score 0 · Accepted Answer

tdを相対位置に設定し、スパンを絶対位置に設定してから、スパンの位置とおそらく幅を設定します。スパンもブロックとして表示する必要があります。これにより、スパンが現在の位置に留まり、途中で何かと重なるようになります。スパンはツールチップのように動作する必要があります。

score 0 · Accepted Answer

これを試して：

基本的な考え方は、tdまたはspanのいずれかの幅を固定することです

span
{
    width:50px;
    overflow-x:scroll; /* or hidden */
}

score 0 · Accepted Answer

このcssルールを追加するだけです

td {
    max-width: 87px;
}

ここで試してみてください

score 0 · Accepted Answer

td に min-width と max-width を使用してみてください。そうすれば、必要なものが得られます

CSS

.tds{
max-width: 60px;min-width: 60px;
}

score 0 · Accepted Answer

.lable クラスに現在ラップスタイルがあります。
white-space を normal に設定して削除するだけです。

.label{
    width:55px;
    word-wrap:break-word;
    white-space: normal !important;
}

6 に答える 6