CSS の省略記号テクノロジーを超えたテキストにより、長い段落のテキストが読みやすくなり、Web ページも美しくなります。この記事では、省略記号のいくつかの異なる形式と、ニーズに応じてそれらを定義する方法を詳しく見ていきます。
1. なぜ楕円を使用するのでしょうか?
テキストが Web サイトまたはアプリケーションのコンテナーの幅または高さを超える場合、テキスト オーバーフロー切り捨てテクノロジを使用して、超過部分を非表示にし、テキストの末尾に省略記号を表示できます。この手法により、ページがすっきりし、テキストがオーバーフローした場合の乱雑さを回避できます。
2. CSS で省略記号を使用するにはどうすればよいですか?
CSS でテキスト オーバーフロー省略記号を使用するには、次の 3 つの属性を使用する必要があります:
text-overflow 属性はテキストがコンテナからオーバーフローしたときに何が起こるかを定義します。このプロパティを使用すると、次のテキスト オーバーフロー タイプを作成および定義できます。
*clip: テキストのオーバーフロー部分を切り詰めます。
*省略記号: テキストがオーバーフローするコンテナーの端に省略記号を表示します。
white-space 属性は、スペース、改行など、テキスト内の空白を処理する方法を定義するために使用されます。通常、次の 3 つの値を使用します。
*normal: 改行は強制されず、単語間のスペースは自動的に調整されます。
##nowrap: テキストの折り返しを許可しません。 *pre-wrap: テキストを所定の形式に保ち、テキスト内にスペースがある場合は、スペースに合わせて改行します。.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; }
以上が省略記号を越えた CSS テキストの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。