Edited at

SPとPCのレスポンシブデザインで改行位置を変えたい場合のCSSハック

例えば、


SPの場合

あのイーハトーヴォの

すきとおった風、
夏でも底に冷たさをもつ
青いそら、うつくしい森で
飾られたモリーオ市、
郊外のぎらぎらひかる
草の波。


PCの場合

あのイーハトーヴォのすきとおった風、

夏でも底に冷たさをもつ青いそら、
うつくしい森で飾られたモリーオ市、
郊外のぎらぎらひかる草の波。

こんな感じで1行に表示させたい文章があったとする。

単純に <br> を入れようとしてもSPだけ、PCだけで改行したいポイントがある。

あのイーハトーヴォの<br class="br-sp">

すきとおった風、<br>
夏でも底に冷たさをもつ<br class="br-sp">
青いそら、<br class="br-pc">
うつくしい森で<br class="br-sp">
飾られたモリーオ市、<br>
郊外のぎらぎらひかる<br class="br-sp">
草の波。

.br-sp {

display: none;
}

@media screen and (max-width: 1080px) {
.br-pc {
display: none;
}

.br-sp {
display: inline-block;
}
}

こんな感じで <br> にクラスを振り、CSSで表示を切り替えると実現できる。