楕円を超えてCSSを表示する方法-フロントエンドQ&A-php.cn

Web デザインでは、テキストコンテンツが長すぎる状況に遭遇することがよくありますが、このとき、インターフェイスのレイアウトが引き伸ばされてユーザーエクスペリエンスに影響を与えることを避けるために、一定の長さを超えるテキストコンテンツは省略して表示する必要があります。 CSS は、開発者がこの機能を実装するのに役立つ、省略記号属性を超えた便利な表示を提供します。

CSS では、省略記号を超えた表示はテキストオーバーフローによって実現されます。テキストの一部がコンテナのサイズを超える場合、text-overflow プロパティを設定して、超過テキストを省略記号 (...) で示すことができます。通常、次の 3 つの属性を指定する必要があります:

white-space 属性: 要素内の空白の処理方法を制御します。値を nowrap に設定できます。これは、テキストが強制されることを意味します。省略記号は通常行末に表示されるため、折り返しなしで表示されます。
overflow 属性: 要素のコンテンツが要素ボックスからオーバーフローした場合の表示方法を制御します。コンテナ内のテキストがコンテナのサイズを超えた場合にのみ表示されるため、値を非表示またはスクロールに設定できます。省略する必要があります。
text-overflow 属性: テキストがコンテナを超えた後にどのように表示されるかを示します。値を省略記号に設定できます。つまり、省略記号 (...) を使用します。

例:

.container { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

ログイン後にコピー

この CSS コードは、コンテナクラス .container を定義します。コンテナ内のテキストコンテンツがコンテナのサイズを超える場合、省略記号 (...)特急を利用させていただきます。同時に、空白属性が nowrap に設定されているため、テキストは折り返されません。

省略記号を超えた表示は、ブロックレベル要素や div、p、span などのインライン要素など、一部の特定の要素にのみ有効であることに注意してください。入力ボックスやボタンなどの要素については、同様の効果を実現するために特定の属性を設定する必要があります。

実際の開発では、異なるブラウザと互換性を持たせるため、省略記号以降の表示を実現するために、次の 2 つの方法を同時に使用することをお勧めします。

テキストを使用する-overflow:ellipsis; -webkit-box -orient:vertical; -webkit-line-clamp:n; WebKit コアの CSS 拡張属性 -webkit-line-clamp と組み合わせて実装されます (n は指定された行数です) 。例:

.container { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

ログイン後にコピー

この CSS コードはテキストコンテンツを 2 行に制限し、超過したコンテンツは省略記号 (...) で表されます。 -webkit-line-clamp 属性は、WebKit コアを備えたブラウザ (Chrome、Safari など) でのみ有効であり、他のブラウザでは他の属性を使用する必要があることに注意してください。

これを実現するには、擬似要素 :before または :after を content 属性と組み合わせて使用します。例:

.container { position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .container:after { content: "..."; position: absolute; z-index: 2; bottom: 0; right: 0; background-color: #fff; }

ログイン後にコピー

この CSS コードでは、疑似要素: after を使用して白い背景色の要素を追加し、コンテンツ "..." を持つ content 属性を使用して省略記号を実現します。効果。擬似要素とコンテナの相対位置を維持するには、コンテナクラスのposition属性をrelativeに設定する必要があることに注意してください。

つまり、省略記号表示を超えた CSS は、インターフェイスの美しさとユーザーエクスペリエンスを向上させることができる古典的なデザイン手法です。実際の開発では、状況に応じて適切な手法を選択し、期待どおりの効果が得られるか互換性テストを実施する必要があります。

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