CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSで要素内のテキスト折り返しを無効にする方法（white-spaceプロパティ）

要素内のテキストの折り返し（改行）を無効にしたい場合は、CSSの white-space プロパティを使用します。値として nowrap を指定すると、テキストは親要素の幅を超えても折り返されず、1行で表示され続けます。

white-space: nowrap の使い方

以下のコードでは、p 要素に対して white-space: nowrap; を設定しています。これにより、段落内の長いテキストが画面端に達しても自動的に改行されなくなります。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         p {
            white-space: nowrap;
         }
      </style>
   </head>
   <body>
      <p>
         これはデモ用のテキストです。これはデモ用のテキストです。
         これはデモ用のテキストです。これはデモ用のテキストです。
         これはデモ用のテキストです。これはデモ用のテキストです。
         これはデモ用のテキストです。これはデモ用のテキストです。
      </p>
   </body>
</html>

補足：white-spaceプロパティの主な値

white-space プロパティには、nowrap 以外にも以下のような値があります。用途に応じて使い分けることで、より柔軟なテキスト表示制御が可能になります。

  • normal：初期値。連続する空白をまとめ、必要に応じて自動的に折り返します。
  • nowrap：テキストを折り返さず、1行で表示し続けます。
  • pre：HTMLソース中の空白や改行をそのまま保持し、折り返しを行いません。
  • pre-wrap：空白や改行を保持しつつ、必要に応じて折り返します。
  • pre-line：連続する空白をまとめますが、改行は保持し、必要に応じて折り返します。

なお、nowrap を使用するとテキストがコンテナからはみ出す場合があるため、必要に応じて overflow プロパティと組み合わせて、スクロール表示や非表示などの制御を加えるとよいでしょう。

  1. CSSのtext-decorationプロパティでテキスト装飾を付ける方法

    CSSのtext-decorationプロパティは、選択した要素のテキストに装飾を適用するために使用します。値として「underline（下線）」「overline（上線）」「line-through（打ち消し線）」などを指定でき、色やスタイルも組み合わせて設定可能です。また、このプロパティはtext-decoration-line（装飾線の種類）、text-decoration-color（装飾線の色）、text-decoration-style（装飾線のスタイル）という3つの個別プロパティを一括して指定できるショートハンド（省略記法）でもあります。基本構文text-decorationプロ

  2. CSSのcolorプロパティを使って要素の文字色を設定する方法

    CSSの color プロパティは、要素のテキスト（文字）の色を変更するために使用されます。値には、標準的なカラーネーム、rgb()、rgba()、hsl()、hsla()、そして16進数（HEX）カラーコードなど、さまざまな形式を指定できます。 構文 CSSの color プロパティの基本構文は以下のとおりです。 Selector {     color: /*値*/ } それでは、実際のコード例を見ていきましょう。 コード例1：複数の色指定方法を使う 次の例では、16進数カラーコード、rgba()、hsl() の3つの異なる指定方法を組み合わせて使用