spanタグでちょうどいいところで改行させる方法

2023年6月26日

こんにちは。
現在事務のパートをしながらWeb制作の仕事をしている、リコです。

先日コーディングの仕事をした時、「改行される位置がおかしいので調整して欲しい」というフィードバックがありました。

その時に「spanにdisplay: inline-block; とか方法があるのでご参考まで」と大変ありがたいヒントをいただいたので忘備録としてブログにも残したいと思います。

改行のよくある方法

HTMLでよくある改行は、文章中改行させたいところで<br>を使うことかと思います。

レスポンシブ対応で「PC表示だけ」「スマホ表示だけ」改行、というパターンはメディアクエリ―で制御すると思います。

.pc_only {
    display: none;
}

.sp_only {
    display: block;
}

@media screen and (min-width: 960px) {
    .pc_only {
        display: block;
    }

    .sp_only {
        display: none;
    }
}

<p>スマホだけ改行<br class="sp_only">スマホだけ改行</p>

上記の場合だと、960px未満の時だけ改行されます。

特に長いキャッチコピーや見出しの時はメディアクエリで改行していたのですが、長い文章になると適切な改行位置が分からなくなってテキストを中央寄せで見せたい時などこんな風に変な改行になります。

PC表示時

スマホ表示時

これは私の仕事用Webサイトのスクリーンショットです。

これを、スマホの時だけ左寄せにする方法や細かく区切って改行させたりしていたのですが、今回いただいたヒントでブラウザの幅によってちょうどいいところで改行させることができました。

spanタグを使って改行させる方法

まず、スタイルシートに以下のように記述をします。

.br_span{
display: inline-block;
}

そしてHTMLソースにはこんな感じで記述をします。

<p class="has-text-align-center">制作に関するご相談、お見積りなど、
<span class="br_span">nico-iro designにご興味を</span>
<span class="br_span">お持ちいただけましたら</span>
<br class="pc_only"><span class="br_span">こちらのフォームから</span>
<span class="br_span">お気軽にお問い合わせください。</span></p>

「お持ちいただけましたら」の後をPCだけ改行させたかったので<br class=”pc_only”>を一部入れていますが、これで最後の「お問い合わせください」が変なところで改行されないようになりました。