テーブル内のコンテンツのオーバーフローに対処する方法

今回は、テーブルのコンテンツが溢れた場合の対処方法を紹介します。 テーブルのコンテンツが溢れた場合の注意事項は何ですか。実際のケースを見てみましょう。

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

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

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

/*溢出部分样式*/  
.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の基礎知識、ハイパーリンク設定のスタイルについて詳しく紹介

HTML段落の知識まとめ

HTMLテキスト形式の知識まとめ

以上がテーブル内のコンテンツのオーバーフローに対処する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。