スマホだけで改行する時どうするか

 今回は改行の話

スマホのみ改行はbrかspanかdivか

まず、改行がなんのために必要かという当たり前の話としては人が文章を読みやすくするためです。
じゃあ改行されるような要素にどんな意味があるのかというところからですが・・・

コンテンツ部分が記事となる文章であれば<article>
その中に記事としての区切りがあれば<section>
ある程度の文章の区切りは<p>
文節分ける時が改行の<br>
文章の装飾、インラインは<span>
デザイン的区切り、ブロック単位の装飾は<div>

スペースを制御するのに<br>を使うのは意味タグとして正しくありません。
ですが、逆に言えば改行として問題ないならば<br class="br-md">とかのほうが正しい。

今回の話はTableのセルの中身

今回記事を書く元になった問題はセルの中身。
幅100%でスマホになると見辛い。
項目として１つ～３つの文字アイテムがある時、２・３の文字列がごちゃる。
安直な解決策は面倒臭いなら
「あああああ」、
「いいいいい」、
「ううううう」
こうで良い。PCでもスマホでも大きな問題はない。
ただ、PCで見た時に無駄に縦に伸びる。
PCならば「あああああ」、「いいいいい」、「ううううう」となって欲しい。
もう一つ簡単な方法はTableを囲んでoverflow。

単純な区分けとしてはデザインか否か

今回の場合は列として複数あるが一つのデータであり、改行で問題ない。
であれば、brにclassで良い。なぜなら制御したいのは改行だけだから。
spanで囲むのと違いbrなら明確に改行を制御しているのが分かる。
装飾が目的ならspan、またデータが複数多い場合はリストが正しい。

まぁリストを含むほどのTableになるのであればたぶん列か行に分散されるような気はする。
また、divで囲むブロックとしての情報ならやはり行を増やす様なデータな気がする。

例えば装飾するならば改行不要のデータにもspanで囲む必要性がある場合、でも今回の場合は1つのデータしかない場合spanで囲まないし囲む必要も特にない。
もしここに装飾が本当に必要になったならその時にspanで囲めばいい。
だから今回はbrという感じ。

装飾方法

記述的には不要な定義を入れない事を考えれば片方だけの方が良い。
デフォルトが改行そのまま、PCの時だけ挙動を変更してnoneにする方が良い。

@media (min-width: 768px) {.br-md {display: none;}}

ちなみにTailwindならbr hidden md:inline または、 br md:hidden（逆パターン）と簡単に設定できる。