CSSでオーバーフロー非表示を実装する方法

CSS でオーバーフロー非表示を実装する方法: 1. 「overflow: hidden;」スタイルを要素に追加し、コンテンツが要素ボックスからオーバーフローしたときにオーバーフロー部分をトリミングして非表示にするように設定します。2. 「」を追加します。 text-overflow" を要素 :ellipsis;" スタイルに変更すると、トリミングされたコンテンツ (非表示のコンテンツ) を省略記号 "..." で表すことができます。

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

単一行のテキストで省略記号のオーバーフロー表示を実現したい場合は、 text-overflow:ellipsis 属性を使用することをご存知でしょう。もちろん、幅属性も追加する必要があります。一部のブラウジングに対応。

実装方法:

overflow: hidden;text-overflow:ellipsis;white-space: nowrap;

効果は次のとおりです:

ただし、この属性は 1 行のテキストの省略記号のオーバーフロー表示のみをサポートします。 , 複数行を実装したい場合、テキストがオーバーフローして省略記号が表示されます。

次に、次のように、複数行テキストのオーバーフロー表示の省略記号に注目してみましょう。

実装方法:

display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;

効果は以下の通り:

適用範囲:
WebKitのCSS拡張属性を使用しているため、このメソッドは WebKit ブラウザとモバイル端末に適用できます;

注:

• -webkit-line-clamp は、WebKit ブラウザーとモバイル端末に表示されるテキストの行数を制限するために使用されます。ブロック要素。この効果を実現するには、他の WebKit プロパティと組み合わせる必要があります。一般的に結合される属性:

• display: -webkit-box; オブジェクトをフレキシブル ボックス モデルとして表示するために結合する必要がある属性。

• -webkit-box-orient は、フレックス ボックス オブジェクトの子要素の配置を設定または取得する属性と組み合わせる必要があります。

実装方法:

p{position: relative; line-height: 20px; 
max-height: 40px;
overflow: hidden;}
p::after{content: "..."; position: absolute; bottom: 0; right: 0; 
padding-left: 40px;background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);}

効果は図のとおりです:

##適用範囲:

この方法応用範囲が広いですが、文字が行を超えない場合には省略記号も表示されますので、この方法はjsで最適化することができます。 [推奨学習:
css ビデオ チュートリアル ]

注:

• 余分なテキストが表示されないように、高さを行の高さの整数倍に設定してください。露出 。

• テキストの半分だけが表示されないようにするには、p::after にグラデーションの背景を追加します。

• ie6-7 ではコンテンツの内容が表示されないため、ie6-7 と互換性を持たせるためのタグを追加する必要があります (例: …)。 ; ie8 と互換性を持たせるには、次を追加する必要があります: :after は :after に置き換えられます。

以上がCSSでオーバーフロー非表示を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。