省略記号を越えた CSS テキスト

CSS の省略記号テクノロジーを超えたテキストにより、長い段落のテキストが読みやすくなり、Web ページも美しくなります。この記事では、省略記号のいくつかの異なる形式と、ニーズに応じてそれらを定義する方法を詳しく見ていきます。

1. なぜ楕円を使用するのでしょうか?

テキストが Web サイトまたはアプリケーションのコンテナーの幅または高さを超える場合、テキスト オーバーフロー切り捨てテクノロジを使用して、超過部分を非表示にし、テキストの末尾に省略記号を表示できます。この手法により、ページがすっきりし、テキストがオーバーフローした場合の乱雑さを回避できます。

2. CSS で省略記号を使用するにはどうすればよいですか?

CSS でテキスト オーバーフロー省略記号を使用するには、次の 3 つの属性を使用する必要があります:

1. text-overflow 属性

text-overflow 属性はテキストがコンテナからオーバーフローしたときに何が起こるかを定義します。このプロパティを使用すると、次のテキスト オーバーフロー タイプを作成および定義できます。

*clip: テキストのオーバーフロー部分を切り詰めます。

*省略記号: テキストがオーバーフローするコンテナーの端に省略記号を表示します。

2. white-space 属性

white-space 属性は、スペース、改行など、テキスト内の空白を処理する方法を定義するために使用されます。通常、次の 3 つの値を使用します。

*normal: 改行は強制されず、単語間のスペースは自動的に調整されます。

overflow プロパティ

単一行の省略記号スタイル

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

複数行の省略記号スタイル

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

一定の文字数を超える場合は省略記号を使用します

.ellipsis{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }

ログイン後にコピー
4. まとめ
テキストオーバーフロー、空白、およびCSS のオーバーフロー プロパティを使用すると、いくつかの異なる省略記号スタイルを使用してテキスト オーバーフロー タイプを作成および定義できます。これらには、単一行の省略記号スタイル、複数行の省略記号スタイル、および特定の文字数を超えた場合の省略記号の使用が含まれます。この手法により、ページが整理され、テキストがオーバーフローした場合のページ レイアウトの混乱を避けることができます。

以上が省略記号を越えた CSS テキストの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。