1. ホーム
  2. Web制作
  3. HTML/Xhtml

テーブル表におけるコンテンツのはみ出しに対するレイアウト方法

2022-02-05 11:57:33

コンテンツのオーバーフローとは何ですか?実は、テキストがたくさんあって、コンテンツエリアがその長さしかない場合、余分な部分をドットで置き換えることなんです。

表にテキストを入力しすぎると、行が長くなったり、改行が自動になったりと、表がぐちゃぐちゃになることが分かっています。でも、固定幅の行で表示したいだけの場合もあるし、余分な部分が代わりにドットになっていれば、表がごちゃごちゃになることはない。では、どうすればいいのでしょうか。

通常、次の属性を使用します。

CSSコード 内容をクリップボードにコピーする
  1. /*オーバーフロー部のスタイル*/
  2. .txt-ell {   
  3. ホワイト ホワイトスペース : ナウラップ ; // 強制的に1行に表示させる   
  4. オーバーフロー : 非表示 ; //オーバーフローコンテンツカット非表示   
  5.     テキスト オーバーフロー :ellipsis; // overflowブロックコンテナをインライン化する場合、overflowセクションを...に置き換えます。  
  6.     ワードブレーク:keep- <スパン すべて ; //単語内での改行を許可する   
  7. カラー //ここに自分でマークをつける   
  8. パディング : 0  7px ; // 枠から距離を取りたかったので、下に設定した   
  9. }  
CSSコード 内容をクリップボードにコピーする
  1. <スパン .table-fix {   
  2. <スパン テーブルレイアウト : 固定 ;     
  3. }  

まず、2つ目のスタイルは、特にtableタグに追加されます。コンテンツ・オーバーフローを実現するには、テーブルの幅と高さを固定し、テーブル内のtrとtdも幅と高さを固定する必要があります。コンテンツ・オーバーフローを使用する前に、まずテーブルにクラスtable-fixを追加してください。次に、彼らのtrをチェックして、tdは、幅を与えていない場合、それはバー、固定も、またの割合を与えることが最善です、私は主に固定幅にパーセント、外側のテーブルを与える、trとtdの内部は、幅の割合ですので、コンテンツのオーバーフローのスタイルを使用することができます。最後に、コンテンツ内のグリッドが非常に多い場合は、ドットドットを達成するために、このグリッドに.txt-ellクラスを追加し、それ

以上、テーブル表でのコンテンツオーバーフローレイアウト方法についてお伝えしましたが、ご参考になれば幸いです。また、スクリプトハウスを応援していただければ幸いです。

元記事のアドレスです。 http://www.cnblogs.com/hanyining/archive/2016/05/25/5527668.html