発端
「場合による」のかと。
— W.D. (@WD4096) January 4, 2023
最近はFlexboxで改行させることが多いですが、tableも使いますし、ユーザーからの投稿を表示する場合は改行を許可したり（\nを<br>に置換）しますし、Google Siteで作成したページだと元々の記事の横幅が狭いので、改行で成形するのも場合次第で十分ありだと思っています。
うーん。
— W.D. (@WD4096) January 4, 2023
画面サイズに合わせてCSSで改行有無をコントロールする方法で対処するのが無難かも知れませんね。
オンライン講習終わったら書いてみます。
解決策
CSSを使って、画面サイズが600pxより小さい場合はbr要素を消すCSSを書きました。
以下、任意の文字列を入力できる動作確認ページです。
前述のCSSはこの記事にも適用しています。
以下、改行の調整が上手くいっているのか、確認してみます。
改行テストの為、
読点（、
）毎に改行タグを挿入します。
スマートフォンで閲覧した場合に、
縦画面では改行が無効化され、
横画面では改行が有効になります。
画面の自動回転を有効にした状態で試してみると分かりやすいと思います。
顛末
以下、その後のやり取りです。
肝は以下の部分。これにより600px以下の横幅モニターにおいて<br>が無効化されます。
— W.D. (@WD4096) January 4, 2023
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
br {
display:none;
}@media screen and (min-width: 600px) {
br {
display:block;
}
}
</style>
ちなみにスマフォで閲覧していても横回転させると改行が有効になるので、こんな感じの表示になります。 pic.twitter.com/azx7TqQG1r
— W.D. (@WD4096) January 4, 2023
これだけだとどちらでも改行をしたい箇所がある場合には困りますが…はてなブログとかで単なる改行(<br />)と段落とが明確に分かれているようなケースでは有用かもしれないですね
— 風柳 (@furyutei) January 4, 2023
