🍂

pcやスマホで改行の位置を変える方法【css】

2024/06/01に公開

CSS

はじめに

こんにちは。

スマホにだけ改行を入れたい時があると思います。
そのような時のために、
この記事では、pcやスマホで改行の位置を変える方法を紹介します。

どうすれば良いのか

どうすればpcやスマホで改行の位置を変えられるのかというと、
以下のコードのように、brタグにmobile_brというclassを付けます。

そして、cssで、もしスマホだったらmobile_brを表示、
そうでなかったらmobile_brを非表示にすれば出来ます。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>pc and mobile</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<p>
智恵子は東京に空が無いといふ、<br class="mobile_br">
ほんとの空が見たいといふ。<br>
私は驚いて空を見る。<br>
桜若葉の間に在るのは、<br>
切つても切れない<br class="mobile_br">
むかしなじみのきれいな空だ。<br>
どんよりけむる地平のぼかしは<br class="mobile_br">
うすもも色の朝のしめりだ。<br>
智恵子は遠くを見ながら言ふ。<br>
阿多多羅山（あたたらやま）の山の上に<br>
毎日出てゐる青い空が<br class="mobile_br">
智恵子のほんとの空だといふ。<br>
あどけない空の話である。
</p>
</body>
</html>

style.css

.mobile_br {
    display: none;
}

/*もしスマホだったら改行を表示させる*/
@media screen and (max-width: 768px) {
    .mobile_br {
        display: inline;
    }
}

※@media screen and (max-width: 768px)は、@media (max-width: 768px)でも代用出来ます。
詳しくは、以下のサイトに書いてあります。
https://wemo.tech/839

おわり

これで、pcやスマホで改行の位置を替えることが出来ます。

さようなら。

はじめに

どうすれば良いのか

おわり

Discussion