テーブル表におけるコンテンツのはみ出しに対するレイアウト方法
コンテンツのオーバーフローとは何ですか?実は、テキストがたくさんあって、コンテンツエリアがその長さしかない場合、余分な部分をドットで置き換えることなんです。
表にテキストを入力しすぎると、行が長くなったり、改行が自動になったりと、表がぐちゃぐちゃになることが分かっています。でも、固定幅の行で表示したいだけの場合もあるし、余分な部分が代わりにドットになっていれば、表がごちゃごちゃになることはない。では、どうすればいいのでしょうか。
通常、次の属性を使用します。
- /*オーバーフロー部のスタイル*/
- .txt-ell {
- ホワイト ホワイトスペース : ナウラップ ; // 強制的に1行に表示させる
- オーバーフロー : 非表示 ; //オーバーフローコンテンツカット非表示
- テキスト オーバーフロー :ellipsis; // overflowブロックコンテナをインライン化する場合、overflowセクションを...に置き換えます。
- ワードブレーク:keep- <スパン すべて ; //単語内での改行を許可する
- カラー : 赤 //ここに自分でマークをつける
- パディング : 0 7px ; // 枠から距離を取りたかったので、下に設定した
- }
- <スパン .table-fix {
- <スパン テーブルレイアウト : 固定 ;
- }
まず、2つ目のスタイルは、特にtableタグに追加されます。コンテンツ・オーバーフローを実現するには、テーブルの幅と高さを固定し、テーブル内のtrとtdも幅と高さを固定する必要があります。コンテンツ・オーバーフローを使用する前に、まずテーブルにクラスtable-fixを追加してください。次に、彼らのtrをチェックして、tdは、幅を与えていない場合、それはバー、固定も、またの割合を与えることが最善です、私は主に固定幅にパーセント、外側のテーブルを与える、trとtdの内部は、幅の割合ですので、コンテンツのオーバーフローのスタイルを使用することができます。最後に、コンテンツ内のグリッドが非常に多い場合は、ドットドットを達成するために、このグリッドに.txt-ellクラスを追加し、それ
以上、テーブル表でのコンテンツオーバーフローレイアウト方法についてお伝えしましたが、ご参考になれば幸いです。また、スクリプトハウスを応援していただければ幸いです。
元記事のアドレスです。 http://www.cnblogs.com/hanyining/archive/2016/05/25/5527668.html
関連
-
HTMLでdivを入れ子にした場合のマージンが効かない問題の解決法
-
htmlページでjsonデータを表示・整形する方法
-
HTML基本ノート(推奨)
-
フォームからキャリッジリターンを削除する方法 i.e. キャリッジリターン! =Submit
-
htmlのテキストボックス(テキスト)は、様々なメソッドの読み取り専用の実装を使用できません。
-
htmlのテキスト回り込みの例(html mixed text)
-
htmlのselect optgroupタグの使い方の紹介
-
テーブル関連の仕上げとJavascriptによるtable,tr,tdの操作について
-
html2canvasを使用してhtmlコードを画像に変換する方法
-
Zen Coding 簡単で速いHTMLライティング
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン