CSSで要素の表示・非表示を制御する方法

#属性の紹介:

(推奨チュートリアル:

css ビデオ チュートリアル)

1. 表示属性

display 属性は、要素の表示方法を設定するために使用されます。

表示: なし; 非表示オブジェクトの表示: ブロック; ブロック レベルの要素に変換することに加えて、要素を表示することも意味します。

表示によって要素が非表示になった後は、元の要素は占有されなくなります。位置。

2. 可視性 可視性

可視性属性は、要素を表示するか非表示にするかを指定するために使用されます。

可視性: 表示; 要素は表示されます 可視性: 非表示; 要素は非表示です

可視性要素を非表示にした後も、要素は元の位置を占め続けます。

非表示要素が元の位置を必要としない場合は、visibility: hiddenを使用します。

非表示要素が元の位置を必要としない場合は、display: none

3 を使用します。 overflow

overflow 属性は、コンテンツが要素のボックスからオーバーフローした場合 (指定された高さと幅を超えた場合) に何が起こるかを指定します。

通常、オーバーフロー部分はレイアウトに影響を与えるため、オーバーフロー コンテンツは表示されません。ただし、配置されたボックスがある場合は、冗長な部分が非表示になるため、overflow: hidden を使用する場合は注意してください。

4. オーバーフロー テキストの省略記号の表示

4.1 単一行テキストのオーバーフロー表示の省略記号

単一行テキストのオーバーフロー表示の省略記号は、次の 3 つの条件を満たしている必要があります:

Force firstテキストを 1 行以内に表示します

white-space: nowrap;
/*默认值normal，自动换行*/

余分な部分を非表示にします

overflow: hidden;

余分な部分を省略記号に置き換えます

text-overflow: ellipsis;

4.2 複数行のテキストがはみ出して省略記号が表示されます

Multiple 行テキストがオーバーフローして省略記号が表示されますが、これには大きな互換性の問題があり、Webkit ブラウザまたはモバイル端末に適しています。ほとんどのモバイル端末は Webkit カーネルに基づいています。

overflow: hidden;
text-overflow: ellipsis;
/*弹性伸缩盒子模型显示*/
display: -webkit-box;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp: 2;
/*设置或检索伸缩盒子对象的子元素的排列方式*/
-webkit-box-orient: vertical;

関連する推奨事項:

CSS チュートリアル

以上がCSSで要素の表示・非表示を制御する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。