Bootstrapでカラムを改行させたい

Question

前提・実現したいこと

Bootstrapのグリッドシステムを勉強しているのですが、<p>Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.</p>
の部分が改行されず、隣のカラムとかぶってしまいます。
画面幅に合わせて改行がされるようにしたいのですがどうしたら良いのでしょうか。

該当のソースコード

<div class="container">
            <div class="mb-5 row">
              <div class="col-sm-8">
                <h3>Awesome</h3>
                <p>Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.</p>
              </div>
              <div class="col-sm-4">
                <img src="phone.png" class="w-100 rounded-circle">
              </div>
            </div>
          <div class="row">
            <div class="col-sm-8 order-sm-2">
              <h3>Awesome</h3>
              <p>Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.Hello.</p>
            </div>
            <div class="col-sm-4 order-sm-1">
              <img src="movie.png" class="w-100 rounded-circle">
            </div>
          </div>
        </div>``

Answer 1

デフォルトで設定されている改行の方式では、長いアルファベットの単語が折り返しされないように設定されているためです。改行の方式はoverflow-wrapプロパティで指定することが出来ます。今回の場合、以下のコードのようにp要素へoverflow-wrapプロパティを設定すると、p要素の横幅にあわせて長い英単語が改行されるようになります(動作確認用リンク)。

p {
  overflow-wrap: break-word;
}

Comments

[hakiriants]

改行されました！ありがとうございます！