携帯電話での改行のみ

Question

私はウェブサイト上に電話番号を持っています。ラップトップでは見た目はよく見えますが、モバイルデバイスでは数字の半分が次の行にジャンプします。それは良く見えません。

したがって、モバイルデバイスサイズの画面でのみ動作する改行を作成するにはどうすればよいですか？

私はコーディングにあまり経験がありませんので、具体的にしてください:)ありがとうございました！

Answer 1

CSS word-breakプロパティを調べて、単語/文字列が半分になるのを防ぐことができます。特に改行の場合は、<br class="br-on-mobile">などのクラスに要素を追加し、それをCSSのdisplay: noneに設定すると、正常に何も実行できなくなります。 あなたはその後、例えば、特定の携帯電話の画面サイズで改行を表示するには、メディアクエリを使用することができます。

.br-on-mobile { 
    display: none; 
} 

@media screen and (<Your conditions here>) { 
    .br-on-mobile { 
     display: static; 
    } 
} 

EDIT：staticは、表示のために無効な値です。継承を使用すると問題が解決するはずです。あなたのページのヘッダは、メディアクエリの正しいスケーリング/アプリケーションを可能にする<meta name="viewport" content="width=device-width, initial-scale=1">を持っている必要があります：this Fiddle

EDITを参照してください。

また、モバイルデバイスの場合は、数字をスパン要素にラップし、これをdisplay: blockに設定することでこれを達成することもできますが、以下のメディアクエリの問題もこれに当てはまります。