CSS 強制改行プロパティの解釈: 単語区切りと空白

CSS 強制改行プロパティの解釈: ワードブレークと空白、特定のコード例が必要です

Web 開発では、テキスト コンテンツの改行方法は非常に一般的かつ重要な問題です。場合によっては、ページ レイアウトのニーズに合わせたり、読みやすさを向上させるために、長いテキストを強制的に折り返す必要があります。 CSS には、テキストの折り返し方法を制御する 2 つのプロパティ、つまりワードブレークとホワイトスペースが用意されています。

1. word-break 属性:

word-break 属性は、改行が発生する場所を指定します。次の値があります:

• normal (デフォルト): 単語内またはハイフンで折り返されます。これはブラウザのデフォルトの動作です。
• break-all: 単語内の行を区切ります。必要に応じて、ハイフンで単語を区切ります。
• keep-all: 改行は禁止、半角スペースまたはハイフンでのみ改行可能。このプロパティは、非ラテン文字に適用されます。

以下は具体的なコード例です:

<style>
  .normal {
    word-break: normal;
  }
  
  .break-all {
    word-break: break-all;
  }
  
  .keep-all {
    word-break: keep-all;
  }
</style>

<div class="normal">This is a long text. This is a long text. This is a long text.</div>
<div class="break-all">This is a long text. This is a long text. This is a long text.</div>
<div class="keep-all">This is a long text. This is a long text. This is a long text.</div>

上の例では、3 つの div 要素、つまり .normal、.break-all、および .keep -all を定義しました。対応するクラスをさまざまな div 要素に追加すると、ラップ時のさまざまな動作を確認できます。

2. white-space 属性:

white-space 属性は、要素内の空白文字の処理方法を定義するために使用されます。次の値があります:

• normal (デフォルト値): デフォルトの処理方法、連続するスペース、タブ、または改行は 1 つのスペースにマージされ、テキストは自動的に折り返されます。
• nowrap: 改行、連続するスペース、タブ、改行は 1 つのスペースにマージされません。
• pre: 空白文字と改行の元の書式を保持します。
• pre-wrap: 空白文字の元の書式を保持し、テキストを自動的に折り返すことができます。
• pre-line: 空白文字の元の形式を保持します。連続するスペース、タブ、または改行文字は 1 つのスペースにマージされ、テキストは自動的に折り返されます。

以下は具体的なコード例です:

<style>
  .normal {
    white-space: normal;
  }
  
  .nowrap {
    white-space: nowrap;
  }
  
  .pre {
    white-space: pre;
  }
  
  .pre-wrap {
    white-space: pre-wrap;
  }
  
  .pre-line {
    white-space: pre-line;
  }
</style>

<div class="normal">This is a        long text.</div>
<div class="nowrap">This is a        long text.</div>
<div class="pre">This is a        long text.</div>
<div class="pre-wrap">This is a        long text.</div>
<div class="pre-line">This is a        long text.</div>

上の例では、5 つの div 要素、つまり .normal、.nowrap、.pre、.pre-wrap、および を定義しました。 .プレライン。対応するクラスをさまざまな div 要素に追加すると、空白文字や改行を処理するときのパフォーマンスの違いを確認できます。

ワードブレーク属性とホワイトスペース属性を使用すると、実際のニーズに応じてテキストの行折り返しを柔軟に制御でき、ページ レイアウトの効果とテキストの読みやすさが向上します。

概要:

この記事では、CSS のワードブレークとホワイトスペースの 2 つのプロパティについて説明し、具体的なコード例を示します。これら 2 つの属性の使用法をマスターすることで、Web 開発におけるテキストの折り返し方法をより適切に制御し、ユーザー エクスペリエンスを向上させることができます。異なる値と属性の組み合わせにより異なる効果が得られ、開発者は実際のニーズに基づいて使用する適切な属性の組み合わせを選択できます。

以上がCSS 強制改行プロパティの解釈: 単語区切りと空白の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。