テーブル table のコンテンツがレイアウトをオーバーフローします。method_html/css_WEB-ITnose

コンテンツ オーバーフローとは何ですか?実際、テキストが多い場合、コンテンツ領域がそれだけ長い場合、余分な部分はドットに置き換えられます。

今回行うケースは表です。表にテキストを入力しすぎると、たとえば 1 行が長すぎたり、行が自動的に折り返されたりすることがあります。しかし、余分な部分をドットに置き換えると、表を乱雑にせずに、固定幅で行に表示したい場合があります。じゃあ何をすればいいの？

一般的には、次の属性を使用します

/*溢出部分样式*/.txt-ell {    white-space:nowrap;  //强制在一行显示    overflow:hidden;    //溢出的内容切割隐藏    text-overflow:ellipsis; //当内联溢出块容器时，将溢出部分替换为…    word-break:keep-all;  //允许在单词内换行    color: red;  //这里我自己标识一下    padding: 0 7px;  //由于想跟边线留有距离，所以设置了下}

.table-fix {    table-layout:fixed;  }

まず第一に、コンテンツのオーバーフローを実現したい場合は、テーブルの幅が固定されている必要があります。高さ tr と td も固定の幅と高さを持たなければなりません。コンテンツ オーバーフローを使用する前に、まず table-fix クラスをテーブルに追加する必要があります。次に、tr と td に幅が指定されているかどうかを確認します。そうでない場合は、固定幅を指定するか、主にパーセンテージを指定するのが最善です。外側のテーブルは固定幅で、内部の tr と td は固定幅です。コンテンツ オーバーフロー スタイルを使用できるようにするためのパーセント幅です。最後に、グリッドに多くのコンテンツがあり、少しでも達成したい場合は、このグリッドに .txt-ell クラスを追加するだけです