HTMLは、tableのtdコンテンツを固定長に表示しすぎ、余分な部分を省略記号で置き換える方法

この問題は、当社のテスト部門が測定したもので、テストの内容自体がBUGだと言っていますが、これもレイアウトに分類するのに良いテクニックを学びました.tdラベルの長すぎる内容をこのtdのwidthの長さだけに表示し、その後は省略符で代用します.
方法は次のとおりです.
この機能には、tableでstyleを設定する必要があるという前提があります.
table-layout: fixed;
このプロパティはtableの内部レイアウトを固定するサイズです.このときwidth属性でtdの長さを調節します.
次のように追加します.

属性の説明

white-space:nowrap;// 
overflow:hidden;// 
text-overflow: ellipsis;// 

このとき、省略記号になっても、内容が完全ではないものが出てくることに気づきます.
したがって,このときtdのtitle属性を用いて,title属性にコンテンツを表示内容として設定することで,カーソルがtdに留まる限りすべてのコンテンツを表示することができ,これが不十分であると感じられる.自分でmouseoverイベントを書いて、内容を全部表示させることも考えられますが、表示は自動改行で、改行しないと見苦しいスタイルになります.
so:改行にもtable-layout:fixed;
(IEブラウザ)の長い列の英語で自動的に戻ります
方法1:word-wrap:break-wordを同時に追加する.table{
        table-layout:fixed;word-wrap:break-word;
}
 
方法2:

<style type="text/css">
 /* ，IE,Chrome ，FireFox ( )*/
.AutoNewline_break{
  word-wrap:break-word; word-break:break-all; 
}

 .AutoNewline_normal{
   word-wrap:break-word; word-break:normal; 
}
 /* ，IE,FireFox,Chrome */
 .NoNewline{
    white-space:nowrap
}
/* */
div {
  background:red;  word-wrap: break-word;  word-break:break-all;
 }
</style>

上記styleの.*冒頭はhtmlタグのclassが*のタグで、divはすべてのdivを指します.
例:NoNewlineとは、classがNoNewlineのラベルスタイルをwhite-space:nowrapに変更することを意味します.
jsでstyleを変更すればいいです.もちろん最後にmouseoutイベントを書いてmouseoverイベントをキャンセルします.