Bootstrapのグリットレイアウトにて文章の改行が行われません

Question

Bootstrapのグリットレイアウトにて文章の改行が行われません

HTMLでサイト作りの練習をしていて、displayfrexをBootstrapで実装しようとしていたところ不具合がはっせいしました

発生している問題・エラーメッセージ

記載したコードの５行目と１５行目のｐタグ内の文章が改行されず右に並べている写真と文字がかぶってしまいます

該当のソースコード

<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,Hello,Hello,Hello,Hello,</p>
            </div>
            <div class="col-sm-4">
              <img src="MyBootstrap/img/phone.png" class="w-100 rounded-circle">
            </div>
          </div>
          <div class="row">
            <div class="col-sm-8">
              <h3>Awesome</h3>
              <p class="text-break">Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,</p>
            </div>
            <div class="col-sm-4">
              <img src="MyBootstrap/img/movie.png" class="w-100 rounded-circle">
            </div>
          </div>
        </div>

試したこと

ｐタグにclass="text-break"と書いても改善されませんでした

補足情報（FW/ツールのバージョンなど）

ツールはVScodeを使用しています。ドットインストールというプログラム学習サイトのBootstrapのlesson14にしたがってコードを記入しました。

Comments

[退会済みユーザー]

ascii文字列はワードブレイクがないので 　基本改行されません。
word-break: break-all

辺りを考えよう

[sshino]

教材だとｐタグになにも記載せずとも文章が改行されていました。模写も何度も見直しましたがコードの記入もれもみつかりませんでした。再度コード全体を貼り付けて質問した方がよろしいでしょうか？

Answer 1

本件不具合ではなく、ダミー文言が適切でない (現実にはあり得ない) 状態であることが原因と考えられます。

Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,Hello,
を

Hello, Hello, Hello, Hello, Hello, Hello, Hello, Hello, Hello, Hello, Hello, Hello,
というように、半角スペースを追加するか、

ああああああああああああああああああああああああああああああああああああああああああああああああ
というように全角文字にしてみるか、を試してみてください。

改行すると思います。

---

アルファベットは、単語と単語の間を半角スペースで区切っています。
日本語は単語の途中で文字が改行することもよくありますが、
欧文の場合は単語をまるごと次の行に送るのが一般的です。

そのため欧文を使用している文化圏で誕生したHTMLやCSSは、半角文字のまとまりを改行しないように作られているのだと、私は解釈しています。

長い欧文の単語を途中で改行する仕組みとしてword-break: break-allがありますが、本件ではおそらく不要ではないかと思われます。

Hello,Hello,Hello,...といったダミー文言ではなく、実際の文章を入力すると改行しないということは発生しないはずなので。

Comments

[sshino]

上手くいきました！分かりやすい解説までありがとうございました。