PCでは改行したいが、スマホで見た時には改行したくない。
いろんなやり方があるので、参考として。
PCは改行、スマホで改行を消す
▼HTML PCは改行、スマホで改行を消す(横幅767px以下の場合だけ改行を消す)
<p>
山路を登りながら、こう考えた。<br>
智に働けば角が立つ。<br class="s-br-kesu">
情に棹させば流される。<br class="s-br-kesu">
意地を通せば窮屈だ。<br class="s-br-kesu">
とかくに人の世は住みにくい。<br>
住みにくさが高じると、安い所へ引き越したくなる。<br class="s-br-kesu">
どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。<br>
草枕 夏目漱石
</p>
▼CSS PCは改行、スマホで改行を消す(横幅767px以下の場合だけ改行を消す)
/* スマートフォン向けCSS 画面の横幅767px以下の場合 */
@media screen and (max-width: 767px) {
.s-br-kesu {
display: none; /* 非表示 */
}
}
▼画面を伸縮させてみてください。(改行される部分と、されない部分があるのが分かります)
山路を登りながら、こう考えた。
智に働けば角が立つ。
情に棹させば流される。
意地を通せば窮屈だ。
とかくに人の世は住みにくい。
住みにくさが高じると、安い所へ引き越したくなる。
どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
草枕 夏目漱石
PCで改行を消す、スマホで改行を出す
▼HTML PCで改行を消す、スマホで改行を出す(横幅767px以下の場合だけ改行を出す)
<p>
山路を登りながら、こう考えた。<br>
智に働けば角が立つ。<br class="s-br-dasu">
情に棹させば流される。<br class="s-br-dasu">
意地を通せば窮屈だ。<br class="s-br-dasu">
とかくに人の世は住みにくい。<br>
住みにくさが高じると、安い所へ引き越したくなる。<br class="s-br-dasu">
どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。<br>
草枕 夏目漱石
</p>
▼CSS PCで改行を消す、スマホで改行を出す(横幅767px以下の場合だけ改行を出す)
/* PCで改行を消す */
.s-br-dasu {
display: none; /* 非表示 */
}
/* スマートフォン向けCSS 画面の横幅767px以下の場合 */
@media screen and (max-width: 767px) {
.s-br-dasu {
display: block; /* 表示 */
}
}
▼画面を伸縮させてみてください。(改行される部分と、されない部分があるのが分かります)
山路を登りながら、こう考えた。
智に働けば角が立つ。
情に棹させば流される。
意地を通せば窮屈だ。
とかくに人の世は住みにくい。
住みにくさが高じると、安い所へ引き越したくなる。
どこへ越しても住みにくいと悟った時、詩が生れて、画が出来る。
草枕 夏目漱石
