【初心者でもわかる】CSSで改行や折返しを調整するための6つの方法

#どうも7noteです。改行や折返しをコントロールするための6つの方法を解説します。

webサイトを作る中で、改行や折返しに関する調整が必要なことがあります。
改行をPCとスマホで出し分けたり、折返しを禁止させたりなど。

そんな改行と折返しを調整するためによく使われるCSSの手法を6つ紹介できればと思います。

折返しを禁止する方法

style.css

p {
  white-space: nowrap;
}

これは単体で使うより、overflow-x:scroll;などと一緒に使うことが多いです。
折返しさせずに、全て横一列に並べたものをスクロール可能にして使えるようにする方法です。

URLなどでも強制的に折返しする方法

style.css

p {
  word-break: break-all;
}

これで強制的に英単語の途中でも折返しさせることができます。

PCとスマホで改行を出し分ける方法

style.css

br.pconly {
  display: inline; /* ここは書かなくてもOK */
}
br.sponly {
  display: none;
}
@media screen and (max-width: 768px) {
  /* スマートフォンの場合 */
  br.pconly {
    display: none;
  }
  br.sponly{
    display: inline;
  }
}

専用のクラスを作成することで、改行タグの出しわけが可能になります。
brタグはインライン要素なのでソース上で改行しないように注意してください。半角スペースが発生してしまう場合があります。

フォントサイズを変える

style.css

p {
  font-size: 14px; /* ちょっと小さいサイズにする */
}

フォントサイズが大きい過ぎると、1文字だけ折返しされてすこしブサイクになってしまうことがあります。
そんなときは少し文字サイズを小さくすれば1行でおさまります。

字幅を変える

style.css

p {
  letter-spacing: -1px; /* 字幅を狭くする */
}

文字サイズだけでなく、字幅を変えて調整することも可能です。

フォントサイズをvwで指定する(※スマホの時)

style.css

p {
  font-size: 4vw;
}

スマホの場合であれば、デバイスによって1文字だけ改行されてしまう場合があるかも知れません。
そんな時は文字サイズを画面の幅に対しての大きさ、つまりvwで指定することでどのスマホデバイスでも1行で収まるようにできます。

※他の文字との大きさのバランスに注意、
※PCでは文字サイズをvwで指定することは滅多にない！大きくなりすぎたりするので。

まとめ

改行や折返しのコントロールはデザインデータでは成形されていて綺麗になっていますが、コーディングではデザインと同じような微調整を行うことはかなり難しいです。

文字数が増えたり減ったりする事や、デバイスによって画面幅が変わる事も注意しながら作成する必要があるので、この方法なら大丈夫ということはなく、適材適所でうまくCSSを使わなければなりません。

ここで紹介した改行調整のテクニックを使えば、大体の場面で対応できると思うのでぜひやってみて欲しいです。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ