CSS テキスト オーバーフロー プロパティの詳細な説明: text-overflow と ellipsis

CSS テキスト オーバーフロー プロパティの詳細な説明: text-overflow と ellipsis

Web デザインでは、テキスト コンテンツが長すぎて表示できない状況によく遭遇します。完全に。現時点では、CSS のテキスト オーバーフロー プロパティを使用して、テキストの表示方法を制御できます。その中で、最もよく使用される 2 つのプロパティは、text-overflow と ellipsis です。

text-overflow プロパティ
text-overflow プロパティは、テキストがコンテナからオーバーフローした場合にテキストを表示する方法を設定するために使用されます。次の 3 つの値があります。

1. clip: デフォルト値。はみ出したテキストが切り取られ、はみ出した部分が表示されないことを示します。
2. 省略記号: オーバーフローを示すテキストは省略記号で表されます。
3. string: オーバーフローしたテキストが指定された文字列に置き換えられることを示します。

ellipsis 属性
ellipsis は text-overflow の省略属性です。ellipsis 属性を使用すると、テキストがオーバーフローした場合の省略記号表示効果をより迅速に実現できます。値は ellipsis の 1 つだけです。これは、オーバーフローしたテキストが省略記号で表されることを意味します。

コード例:
テキスト オーバーフローと省略記号を使用して、テキストがオーバーフローしたときに省略記号の表示効果を実現する方法を見てみましょう。

HTML コード:

<div class="overflow-container">
  <p class="text">这是一段很长的文本，当超出容器时将以省略号方式显示。</p>
</div>

CSS コード:

.overflow-container {
  width: 300px; /* 设置容器的宽度 */
  white-space: nowrap; /* 设置文本不换行 */
}

.text {
  overflow: hidden; /* 隐藏溢出的文本 */
  text-overflow: ellipsis; /* 使用省略号显示溢出的部分 */
}

上記のコードでは、幅 300px のコンテナを作成し、テキストを段落タグの中央で折り返します。コンテナの幅とテキストのプロパティを設定することで、テキスト内容が長すぎる場合、はみ出した部分を非表示にして省略記号で表示します。

概要:
Web デザインでは、テキスト オーバーフローの表示を制御することは重要なスキルです。 CSS のテキスト オーバーフロー プロパティと省略記号プロパティを使用すると、省略記号の表示効果を簡単に実現できます。これらの属性は、限られたスペースでより多くのコンテンツを表示し、ユーザー エクスペリエンスを向上させるのに役立ちます。

注: text-overflow プロパティと省略記号プロパティは、一部のブラウザ (特にモバイル ブラウザ) では互換性の問題が発生する可能性があります。これらの属性を使用する場合は、最初に各ブラウザの互換性をテストして、最適な表示効果を確保することをお勧めします。

以上がCSS テキスト オーバーフロー プロパティの詳細な説明: text-overflow と ellipsisの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。