CSS テキスト レイアウト プロパティの詳細な説明: テキスト オーバーフローと空白

CSS テキスト レイアウト プロパティの詳細な説明: テキスト オーバーフローとホワイトスペース

Web デザインでは、テキスト レイアウトは非常に重要なリンクであり、合理的なレイアウトを作成できます。テキストがより読みやすく、より美しくなります。 CSS には、テキスト オーバーフローや空白など、テキストの表示方法を制御するいくつかのプロパティが用意されています。この記事では、これら 2 つのプロパティの使用法とサンプル コードについて詳しく説明します。

1. Text-overflow 属性

text-overflow 属性は、テキストがコンテナを超えた場合にテキストがどのように表示されるかを制御するために使用されます。一般的な値は次のとおりです。

1. clip: デフォルト値。コンテナを超えた部分はクリップされます。
2. 省略記号: コンテナを超えた部分は省略記号 (...) で表示されます。
3. string: 表示される文字列はカスタマイズできます。

以下はサンプル コードです:

<style>
  .container {
    width: 200px;
    white-space: nowrap; /* 强制不换行 */
    overflow: hidden; /* 超出容器部分隐藏 */
    text-overflow: ellipsis; /* 超出部分以省略号显示 */
  }
</style>

<div class="container">
  This is a long text that should be truncated with an ellipsis when it overflows.
</div>

上記のコードでは、コンテナを使用し、幅を 200px に設定し、テキスト コンテンツは長文です。ホワイトスペース属性を nowrap に設定すると、行の折り返しが強制されなくなり、オーバーフロー属性が非表示になり、コンテナを超えた部分が非表示になります。最も重要なことは text-overflow プロパティです。これを省略記号に設定します。これは、超過部分が省略記号で表示されることを意味します。

2. ホワイトスペース属性

ホワイトスペース属性は、テキスト内のホワイトスペース文字の処理方法を制御するために使用されます。一般的な値は次のとおりです。

1. normal: デフォルト値。空白文字は自動的に処理され、連続する空白文字は 1 つのスペースにマージされ、改行とタブもスペースとして扱われます。
2. nowrap: 強制的に改行を行わず、連続する空白文字を 1 つのスペースにマージします。
3. 前: 元の空白文字を保持し、テキストの空白形式を維持します。
4. pre-wrap: 元の空白文字を保持し、改行を許可すると、テキストが元の形式で表示されます。
5. pre-line: 空白文字は自動的に処理されますが、改行は保持され、改行が許可されます。テキストは元の形式で表示されます。

以下はサンプル コードです:

<style>
  .container {
    white-space: pre-wrap; /* 保留原始的空白符，允许换行 */
  }
</style>

<div class="container">
  This is a long text that should wrap when it reaches the container's width.
</div>

上記のコードでは、コンテナを使用し、空白属性を事前にラップするように設定して、テキストが保持されるようにします。元の空白、改行を許可します。

テキスト オーバーフローと空白のプロパティを使用すると、テキストのレイアウトをより柔軟に制御して、テキストをより美しく読みやすくすることができます。実際のWebデザインでは、必要に応じて適切な値を選択し、サンプルコードに基づいてデバッグできます。

概要:

text-overflow とwhite-space は、テキスト レイアウトを制御するために使用される CSS のプロパティです。 text-overflow は、テキストがコンテナを超えた場合の表示方法を制御するために使用されます。一般的な値は、クリップ、省略記号、および文字列です。white-space は、テキスト内の空白文字の処理方法を制御するために使用されます。共通の値ノーマル、ナラップ、プレ、プレラップ、プレラインです。これら 2 つのプロパティを適切に適用することで、より優れたテキスト レイアウト効果を実現できます。

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