htmlとcssでスマホの時だけテキストを改行させる方法

TECH

2024.06.28

CSSで特定の要素をスマホの時だけ改行させるには、メディアクエリを使用します。以下は、その具体的な方法です。

例えば、以下のようなHTML構造があるとします

<p class="example-text">この文章は長いので、モバイル・デバイスでのみ改行してください。</p>

CSSを次のように書くことで、スマホサイズの画面でのみ改行を強制することができます。

.example-text {
  white-space: nowrap; /* 改行を無効にする */
}

/* スマホサイズの画面のみでのスタイル */
@media (max-width: 600px) {
  .example-text {
    white-space: normal; /* スマホサイズでは改行を有効にする */
    word-break: break-word; /* 単語が長すぎる場合に改行を追加する */
  }
}

上記のコードでは、通常は.example-textクラスに対して改行を無効にしていますが、画面幅が600px以下の場合にwhite-space: normal;を適用することで、改行を有効にしています。また、word-break: break-word;を使用することで、長い単語がある場合に適切に改行されるようにしています。

これにより、スマホサイズの画面でのみ指定した要素が改行されるようになります。

brタグとメディアクエリを使って行う方法は？

 タグとメディアクエリを使って、特定の画面サイズ（例えばスマホ）でのみ改行を適用する方法を示します。CSSだけでは動的に タグを挿入・削除することはできませんが、CSSで特定の タグを表示・非表示にすることはできます。

<p class="example-text">
  これは長い文章なので、
  <span class="mobile-br"><br></span>
  モバイル端末でのみ改行されます。
</p>

/* 通常のスタイルでbrタグを非表示にする */
.mobile-br {
  display: none;
}

/* スマホサイズの画面のみでbrタグを表示する */
@media (max-width: 600px) {
  .mobile-br {
    display: inline;
  }
}

HTML: 改行させたい位置に を挿入します。このタグはCSSで表示・非表示を制御します。
CSS:
- 通常のスタイルでは、.mobile-brクラスを持つをdisplay: none;に設定し、非表示にします。
- メディアクエリを使って、画面幅が600px以下の場合に.mobile-brクラスを持つをdisplay: inline;に設定し、表示するようにします。

これにより、特定の画面サイズ（スマホ）でのみ改行を適用することができます。画面が大きい場合は改行が無効になり、画面が小さい場合（600px以下）に改行が有効になります。