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

王林
リリース: 2023-05-21 13:55:07
オリジナル
6303 人が閲覧しました

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

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

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

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

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

  1. text-overflow 属性

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

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

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

  1. white-space 属性

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

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

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

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

    overflow プロパティ
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;
}
ログイン後にコピー

    一定の文字数を超える場合は省略記号を使用します
  1. .ellipsis{
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 200px;
    }
    ログイン後にコピー
    4. まとめ

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

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート