CSS フォントが折り返されないようにする方法

CSS は Web ページのレイアウトに使用される言語で、Web ページ上のさまざまな要素のスタイルや配置を制御できます。中でもフォントはWebページのレイアウトにおいて重要な要素ですが、CSSでフォントを設定する場合、フォントが長すぎると自動的に折り返してしまい、満足のいくページレイアウトが得られないという問題がよく発生します。では、CSS フォントを折り返さないようにするにはどうすればよいでしょうか?

CSS を使用してフォントを設定する場合、通常は「空白」キーワードを使用します。このキーワードの機能は、要素内での空白の処理方法を設定することです。これには、「normal」(デフォルト値)、「nowrap」、および「pre-wrap」という 3 つのオプション値があります。

• normal: 要素内の空白がブラウザによって無視され、複数の空白が 1 つの空白にマージされることを示します。
• nowrap: 要素内の空白はブラウザで無視されますが、単語は分割されません。要素は 1 行で表示されます。1 行で完全に表示できない場合は、オーバーフローします。という処理が行われます。これは私たちが通常使用するデフォルトの方法です。
• pre-wrap: 要素内の空白が保持され、インライン要素を自動的に折り返すことができますが、単語は分割されず、要素が複数行に表示されることを示します。

したがって、CSS フォントが折り返されないようにしたい場合は、「white-space」を「nowrap」に設定するだけで済みます。たとえば、次のコードは、テキスト行が自動的に折り返されないようにします。

div{
  white-space: nowrap;
}

同様に、複数行のテキストが自動的に折り返されないようにしたい場合は、「white-space」を「pre-space」に設定することもできます。包む"。たとえば、次のコードは、段落内のテキストが自動的に折り返されないようにします。

p{
  white-space: pre-wrap;
}

ただし、「事前折り込み」を使用する場合は、テキストが配置されているコンテナーを確認する必要があることに注意してください。十分な高さがある場合、テキストがコンテナの範囲を超えてオーバーフローが発生します。

「空白」の設定に加えて、他の方法を使用して、行折り返しのない CSS フォントを実現することもできます。たとえば、「word-wrap」キーワードを使用して、テキストを自動的に折り返すかどうかを制御できます。このキーワードには、「normal」と「break-word」という 2 つのオプションの値があります。このうち「ノーマル」は単語を分割しないことを意味し、一行も表示しきれない場合はオーバーフロー処理を行うことを意味し、「ブレークワード」は要素内の空白を保持することを意味する。自動的に折り返されますが、単語は分離されます。

テキストが折り返されず、単語を区切ることができるコード例を次に示します。

div{
  word-wrap: break-word;
  white-space: normal;
}

「単語の折り返し」を使用する場合、インライン要素は単語の間にのみ存在することに注意してください。 1行にスペースを含まない長い単語が含まれる場合、完全に表示されない場合があります。

つまり、改行のないCSSフォントのスキルを習得することは、美しいWebページを作成するために不可欠なスキルの1つです。 「ホワイトスペース」と「ワードラップ」というキーワードを合理的に使用することで、テキストの配置をより柔軟に制御し、より美しいインターフェイスを作成し、ユーザーエクスペリエンスを向上させることができます。

以上がCSS フォントが折り返されないようにする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。