ブラウザのサイズ変更時にテキストにCSS省略記号が表示される

幅が100％に設定された<table>があります。 <td>の中には、テキストの幅がオーバーフローする場合に省略記号を追加するテキスト文字列を持つdivがあります。私は<td>の幅に<div>の幅を設定し、これは負荷（またはリフレッシュ）に正常に動作しますが、私はそれがonresizeを動作させることはできませんJavaScriptでブラウザのサイズ変更時にテキストにCSS省略記号が表示される

。

（私は実際にここでやっている何の心配はありません。それは私がこの質問のために簡略化してきた大きなテーブルの一部です。）

誰もが、私は省略記号にテキストを取得する方法を助言することができます-ify onresize？

function doThis() { 
 
    $('.divClass').css('width', $(".tdClass").css('width')); 
 
}

.divClass { 
 
    width:0px; 
 
    white-space:nowrap; 
 
    overflow:hidden; 
 
    text-overflow:ellipsis; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body onload="doThis()" onresize="doThis()"> 
 

 
<table style="width:100%"> 
 
    <tr> 
 
     <td class="tdClass"> 
 
      <div class="divClass"> 
 
       the quick brown fox jumps over the lazy dog the quick brown fox jumps over the lazy dog the quick brown fox jumps over the lazy dog the quick brown fox jumps over the lazy dog the quick brown fox jumps over the lazy dog the quick brown fox jumps over the lazy dog 
 
      </div> 
 
     </td> 
 
    </tr> 
 
</table> 
 

 
</body>

出典

2016-04-11 Daniel Williams

私の回答を見てください – brk

身体属性に

$(window).resize(function(){ 
    doThis() 
});

出典

2016-04-11 05:00:46 vusan

残念ながら、これはどちらも動作しません。 –

'doThis'関数がサイズ変更時に起動されたかどうかをチェックしましたか？ – vusan

あなたはうまく動作する警告（）を行うことができます。 –

を働いていない場合、私はそれが唯一のCSSを使用して行うことができると思い、ブラウザのウィンドウでのサイズを変更をバインドするようにしてください。あなたはこのコードを試してみてくださいすることができます

<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <style> /* Added new style property */ table,tr,td,tbody{ width:100%; display:inline-block; } td{ text-overflow:ellipsis; overflow:hidden; white-space:nowrap; } /* New style property end her */ </style> </head> <body>  <table> <tr> <td>  the quick brown fox jumps over the lazy dog the quick brown fox jumps over the lazy dog the quick brown fox jumps over the lazy dog the quick brown fox jumps over the lazy dog the quick brown fox jumps over the lazy dog the quick brown fox jumps over the lazy dog </td> </tr> </table> </body> </html>

出典

2016-04-11 05:24:15 brk

これはTRごとに1つのTDで動作しますが、各データ行に他のTDがあるので、 'inline-block'はTDをスタックさせるのではなく、横並びにします。 –

事業部は、ブロック要素であるので、あなたは、任意の幅を与えていない場合、それは自動的にTDの幅がかかります。スクリプトが必要でないことを意味します。

出典

2016-04-11 06:09:30

display:blockプロパティに応答するテーブルを作成して、divがtd要素から適切な幅になるようにしてください。

table, thead, tbody, th, td, tr { 
    display: block; 
    height: auto; 
}

出典

2016-04-11 06:13:02 Bhumika107

これはTRごとに1つのTDで動作しますが、各データ行に他のTDがあるので、 'inline-block'はTDを横並びに並べるのではなくスタックにします。 –

ブラウザのサイズ変更時にテキストにCSS省略記号が表示される

答えて

関連する問題