【SCSS/CSS🔰】スマホでは複数行、PCでは1行にしたときに半角スペースが入ってしまうのを直す方法2選

ホームページ制作にあたり、自分自身が躓いたポイントをメモとして残しています。

端末によって1行/複数行を切り替える方法

spanとdisplay:block;を活用する。

【HTML】
<p>
<span>文章１</span>
<span>文章２</span>
</p>

【CSS】
span{
display:block;
}

1行にしたときに半角スペースが入ってしまった場合の対処方法①

HTML側の文章を改行しない。
PC側のspanタグをdisplay:inline-block;に設定する。

【HTML】
<p>
<span>文章１</span><span>文章２</span>
</p>

【CSS】
span{
  display:block;
}
pc｛
 span{
   display:inline-block;
 }
}

1行にしたときに半角スペースが入ってしまった場合の対処方法②

PC側のdisplayをflexに設定する。

【HTML】
<p>
<span>文章１</span>
<span>文章２</span>
</p>

【CSS】
span{
  display:block;
}
pc｛
display:flex;
justify-content:center;
}