表のセルの内容が超過した場合に省略記号効果を表示する（実装コード）

例示する

フロントエンド開発では、セルの幅を制限し、コンテンツが制限を超える部分に省略記号を表示する必要がある状況に遭遇することがよくあります。この効果を実現する方法について簡単に紹介します。

準備知識

1. 改行なしでテキストを制御する

空白: ラップなし;

2. 長さを超えると省略記号が表示されます

オーバーフロー:非表示;

テキストオーバーフロー:省略記号

3. テーブルレイアウトアルゴリズムを変更する

table-layout:fixed; table-layout のデフォルト値は automatic です。つまり、列の幅はセルの内容によって設定されます。固定とは、列幅がテーブル幅と列幅によって設定されることを意味します。

つまり、表の列幅を設定しても、実際には機能しません。セル内のコンテンツが多すぎると、幅は拡張されます。テーブルの列幅をセルに定義した列幅によって決定する場合は、固定値を使用する必要があります。

注意: 1. 表の幅を設定する必要があります。2. 列の幅を設定せずに表の幅のみを設定すると、列の幅は均等に分散されます。

コードデモンストレーション

次のコードに示すように、テーブルには名前、年齢、性別、住所の 4 つの列があります。これらの列の長さは、それぞれ 10%、20%、30%、40% です。

表示効果は以下のとおりです。

名前、年齢、性別、住所の列の長さがそれぞれ 10%、20%、30%、40% であることが簡単にわかります。

ファーストネームの内容が増えると、その効果は見るに耐えないものになります(＞﹏＜)！

見るのが耐えられない(＞﹏＜)！ ！

1行を超える部分を省略記号として表示するにはどうすればよいですか?セルのプロパティを次のように設定するだけです。

変更後の効果は次のようになります。

表のセルのコンテンツが制限を超えた場合に省略記号効果を表示する方法に関する上記の記事（実装コード）は、エディターが皆さんと共有するすべての内容です。参考になれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。