ホームページ > 記事 > ウェブフロントエンド > テーブル内のコンテンツのオーバーフローに対処する方法
今回は、テーブルのコンテンツが溢れた場合の対処方法を紹介します。 テーブルのコンテンツが溢れた場合の注意事項は何ですか。実際のケースを見てみましょう。
コンテンツオーバーフローとは何ですか?実際、テキストが多い場合、コンテンツ領域がそれだけ長い場合、余分な部分はドットに置き換えられます。 今回行うケースは表です。表にテキストを入力しすぎると、行が長すぎたり、行が自動的に折り返されたりすることがあります。しかし、余分な部分をドットに置き換えると、表を乱雑にせずに、固定幅で行に表示したい場合があります。じゃあ何をすればいいの? 一般的には、次の属性を使用します/*溢出部分样式*/ .txt-ell { whitewhite-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 クラスを追加するだけです これらの事例を読んだ後は、この方法を習得したと思います。 、オンラインのphp中国語のその他の関連記事に注意してください。 関連書籍:
HTMLの基礎知識、ハイパーリンク設定のスタイルについて詳しく紹介
以上がテーブル内のコンテンツのオーバーフローに対処する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。