【HTML&CSS】文字列を途中で改行、行の幅を指定する方法を紹介！
どうも皆さんこんにちは！kwです！
今回は、文字列の行の幅を指定する方法を紹介していきたいと思います！
よくウェブサイトを作る際に、<p>タグなど文字を出力するタグで文章を書いていると、画面の端から端まで文字で埋まってしまいますよね。（参考↓）
See the Pen Untitled by kw (@kw-webd) on CodePen.
このように、長い文字列を出力すると端から端まで”テキスト”という文字列で埋まってしまいますよね。
と言うことで今回は、途中で改行したり、文字列の幅を指定する方法を解説していきます！
1.文字列の途中で改行する方法
文字列の途中で改行をするには、<br>と言うタグを使います。
使い方は、前の行の最後の文字と次の行の最初の文字の間に<br>タグを挟むだけです！
実際に例を見てみましょう！↓
See the Pen Untitled by kw (@kw-webd) on CodePen.
こんな感じです！
先ほどの説明は分かりずらかったかもしれませんが、実際に例を見てみたら何となく分かっていただけましたか？
（もし分からなければお気軽に質問してください！）
このように、<br>タグを用いることで、自分の好みの場所で改行することができます！
2.widthを使う方法
先ほど紹介した<br>タグですが、長い文章の場合、毎回毎回文章の間に<br>タグをつけるのは手間がかかりますよね。
そこで今回使うのがwidthと言うプロパティです。
widthといえば、画像やヘッダー、フッターなどに横幅を指定する際に使う印象がありますよね。
ですが、実は文字列に対してもwidthを使うことができるんです！
どのように使うのかと言いますと、文字列を出力するタグにwidthを適用させてあげます。
※文字列を出力するタグとは、先ほどの例で言うと<p>タグのことです。
実際に例を見てみましょう。↓
See the Pen Untitled by kw (@kw-webd) on CodePen.
これだけで <br>タグを使わなくても自分の好きな場所で改行することができます。
このwidthを使うやり方はとても手間を省くことができます。
とても便利な技術なので是非、覚えちゃってください！
3.それぞれの方法のメリット・デメリット
ここまで二つのやり方を紹介してきましたが、「結局どっちのやり方がいいんだ？」と悩んでいる方もいると思います。
なので、今回はそれぞれの方法のメリット・デメリットについても解説していきたいと思います。
①<br>タグを使う方法
メリット
・改行する場所が統一ではないため、区切りがいいところで改行することができる。
・CSSを使うことなく、改行することができる。
デメリット
・とにかく手間がかかる
・コードが少し複雑になってしまう。
・行の幅が気に入らなかったら<br>タグを一文字ずつずらしていかなければならない。
②widthを使う方法
メリット
・手間を省ける
・コードがとても簡単で、行の幅を手軽に変更できる。
デメリット
・細かい調整ができない。
などが挙げられます。
どちらかに絞る必要はなく、作りたい目標物に合わせて使い分けるのがベストです。
4.まとめ
いかがでしたでしょうか？
今回は、文字列を途中で改行する方法を二つ紹介しました。
これら二つをうまく使いこなせると、さらにデザインの幅が広がるので、まだ覚えていない方は今のうちに覚えちゃいましょう！！
今回も、最後まで見てくれた方、ありがとうございました。
ぜひ、お手隙の際に他の記事もご覧ください！
また、分からないところや誤字脱字、その他気になった点などがあれば、お気軽にコメントしていただけると幸いです。
