省略記号を越えた CSS テキスト-フロントエンドQ&A-php.cn

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

王林

リリース： 2023-05-21 13:55:07

オリジナル

6338 人が閲覧しました

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

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

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

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

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

text-overflow 属性

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

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

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

white-space 属性

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

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

##nowrap: テキストの折り返しを許可しません。

*pre-wrap: テキストを所定の形式に保ち、テキスト内にスペースがある場合は、スペースに合わせて改行します。

overflow プロパティは、コンテナ内でコンテンツがどのようにオーバーフローするかを定義します。通常、次の 2 つの属性を使用します。

*visible: コンテンツがコンテナからオーバーフローすることを許可します。

*hidden: コンテンツがコンテナーからはみ出すことは許可されず、余分な部分は切り取られます。

3. いくつかの異なる省略記号スタイル

省略するテキストが 1 行だけの場合は、以下を使用できます。単一行の省略記号スタイル:

.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 サイトの他の関連記事を参照してください。